improved annotations by providing hover hide on annotation hilight

examples/annotations.html

@@ -49,13 +49,14 @@ var line = Morris.Line({
   ykeys: ['licensed', 'sorned'],
   labels: ['Licensed', 'SORN'],
   supportAnnotations: true,
+  hideHoverOnAnnotationHover: true,
   annotations: [
     { period: '2011 W05', label: 'Annotation 0', sticky: true }
   ]
 });
 
-line.on('annotationClicked', function(id, x, label){
-  console.log(id, x, label);
+line.on('annotationClicked', function(id, x, label, coordinates){
+  console.log(id, x, label, coordinates);
 });
 
 line.addAnnotation('2011 W07', 'Annotation A', { fill: '0-#aaa-#777', stroke: '#666' });

lib/morris.line.coffee

@@ -11,6 +11,7 @@ class Morris.Line extends Morris.Grid
     @pointShrink = Raphael.animation r: @options.pointSize, 25, 'linear'
 
     @annotations = {}
+    @forceHideHover = false
 
     if @options.hideHover isnt 'always'
       @hover = new Morris.Hover(parent: @el)
@@ -41,6 +42,7 @@ class Morris.Line extends Morris.Grid
     continuousLine: true
     hideHover: false
     supportAnnotations: false
+    hideHoverOnAnnotationHover: false
     annotationFill: '9-#dadada-#fafafa'
     annotationStroke: '#444444'
     annotationStarFill: '135-#fe0-#fa0'
@@ -100,11 +102,21 @@ class Morris.Line extends Morris.Grid
     y = @bottom
     
     flag = Morris.Line.createAnnotationFlag @r, x, y, options
+    flag.mousemove =>
+      @forceHideHover = true if @options.hideHoverOnAnnotationHover
     flag.mouseover => 
+      @forceHideHover = true if @options.hideHoverOnAnnotationHover
       flag.toFront().animate { opacity: 1.0 }, 150, '<'
-      @fire 'annotationHovered', options.id, options.x, label
-    flag.mouseout => flag.animate { opacity: 0.6 }, 150, '<'
-    flag.click => @fire 'annotationClicked', options.id, options.x, label
+      coordinates = x: x, y: y
+      @fire 'annotationHovered', options.id, options.x, label, coordinates
+    flag.mouseout => 
+      @forceHideHover = false
+      flag.animate { opacity: 0.6 }, 150, '<'
+      coordinates = x: x, y: y
+      @fire 'annotationUnhovered', options.id, options.x, label, coordinates
+    flag.click => 
+      coordinates = x: x, y: y
+      @fire 'annotationClicked', options.id, options.x, label, coordinates
 
   @createAnnotationFlag: (paper, x, y, options) ->
     flag = paper.path(
@@ -167,6 +179,7 @@ class Morris.Line extends Morris.Grid
   #
   # @private
   onHoverMove: (x, y) =>
+    return @displayHoverForRow(null) if @forceHideHover
     index = @hitTest(x, y)
     @displayHoverForRow(index)
 
@@ -175,7 +188,7 @@ class Morris.Line extends Morris.Grid
   # @private
   onHoverOut: =>
     if @options.hideHover is 'auto'
-      @displayHoverForIndex(null)
+      @displayHoverForRow(null)
 
   # display a hover popup over the given row
   #

morris.js

@@ -559,6 +559,7 @@
         r: this.options.pointSize
       }, 25, 'linear');
       this.annotations = {};
+      this.forceHideHover = false;
       if (this.options.hideHover !== 'always') {
         this.hover = new Morris.Hover({
           parent: this.el
@@ -582,6 +583,7 @@
       continuousLine: true,
       hideHover: false,
       supportAnnotations: false,
+      hideHoverOnAnnotationHover: false,
       annotationFill: '9-#dadada-#fafafa',
       annotationStroke: '#444444',
       annotationStarFill: '135-#fe0-#fa0',
@@ -674,19 +676,44 @@
       x = Math.round(x);
       y = this.bottom;
       flag = Morris.Line.createAnnotationFlag(this.r, x, y, options);
+      flag.mousemove(function() {
+        if (_this.options.hideHoverOnAnnotationHover) {
+          return _this.forceHideHover = true;
+        }
+      });
       flag.mouseover(function() {
+        var coordinates;
+        if (_this.options.hideHoverOnAnnotationHover) {
+          _this.forceHideHover = true;
+        }
         flag.toFront().animate({
           opacity: 1.0
         }, 150, '<');
-        return _this.fire('annotationHovered', options.id, options.x, label);
+        coordinates = {
+          x: x,
+          y: y
+        };
+        return _this.fire('annotationHovered', options.id, options.x, label, coordinates);
       });
       flag.mouseout(function() {
-        return flag.animate({
+        var coordinates;
+        _this.forceHideHover = false;
+        flag.animate({
           opacity: 0.6
         }, 150, '<');
+        coordinates = {
+          x: x,
+          y: y
+        };
+        return _this.fire('annotationUnhovered', options.id, options.x, label, coordinates);
       });
       return flag.click(function() {
-        return _this.fire('annotationClicked', options.id, options.x, label);
+        var coordinates;
+        coordinates = {
+          x: x,
+          y: y
+        };
+        return _this.fire('annotationClicked', options.id, options.x, label, coordinates);
       });
     };
 
@@ -775,13 +802,16 @@
 
     Line.prototype.onHoverMove = function(x, y) {
       var index;
+      if (this.forceHideHover) {
+        return this.displayHoverForRow(null);
+      }
       index = this.hitTest(x, y);
       return this.displayHoverForRow(index);
     };
 
     Line.prototype.onHoverOut = function() {
       if (this.options.hideHover === 'auto') {
-        return this.displayHoverForIndex(null);
+        return this.displayHoverForRow(null);
       }
     };