Tweaked some visual styles for box rendering (Fixes #4)

src/app/annotationViewer/_annotation_viewer.scss

@@ -33,20 +33,30 @@ baw-annotation-viewer {
       line-height: $standard-line-height;
 
       li {
-        border-bottom: $tagAlignmentLine solid 1px;
+
         margin-left: -4px;
         position: absolute;
         bottom:  -1px;
         padding-left: 2px;
+        z-index: 0;
+        background-color: transparent;
 
         @include vendor-prefix(transform-origin, 0 0);
         @include vendor-prefix(transform, rotate3d(0,0,1,-20deg));
 
+
+
       }
     }
 
   }
 
+  & .active {
+    z-index: 100;
+    background-color: #ffffff;
+    border-bottom: $tagAlignmentLine solid 1px;
+  }
+
 
   & #scroller{
     overflow-x: scroll;
@@ -109,6 +119,7 @@ baw-annotation-viewer {
     position: absolute;
     background-color: rgba(255,255,255,0.05);
     overflow: visible;
+    z-index: 0;
 
     &:before {
       @if not $DEBUG {
@@ -128,10 +139,15 @@ baw-annotation-viewer {
     &[data-selected="true"] {
       border-color: $marqueeBorderColorSelected;
       @include glow($marqueeBorderColorSelectedGlow);
+      z-index: 100;
 
       & .close-icon{
         visibility: visible;
       }
+
+      &:before {
+        visibility: visible;
+      }
     }
 
     &:hover  {

src/app/annotationViewer/annotationViewer.tpl.html

@@ -5,6 +5,7 @@
         <div class="tag-preview">
             <ul>
                 <li ng-repeat="annotation in model.audioEvents"
+                    ng-class="{active: annotation.selected || annotation.hovering}"
                     ng-style="{left: (positionLabel(annotation)) + 'px' }"
                     ng-eval="tag = getTag(annotation)"
                     >

src/common/jquery.drawabox.js

@@ -1,6 +1,7 @@
 (function ($) {
 
     var SELECTED_ATTRIBUTE = "data-selected";
+    var HOVER_ATTRIBUTE = "data-hover";
 
     var clickLocation = function (e) {
         var posx = 0;
@@ -159,6 +160,16 @@
             default : $newBox.click(raiseSelectCallback); break;
         }
 
+        function onHover(event) {
+            var hovering = event.type === "mouseover" ||
+                event.type === "mouseenter";
+            var $t = $(this);
+            $t.attr(HOVER_ATTRIBUTE, hovering);
+            contextData.options.boxSelected($t);
+        }
+
+        $newBox.hover(onHover);
+
         if (contextData.options.showOnly !== true) {
             // add delete click handler
             $('#' + newId + ' span').click(function () {
@@ -279,14 +290,16 @@
 
     var getBox = function ($element) {
         var selectedAttr = $element.attr(SELECTED_ATTRIBUTE);
+        var hoveringAttr = $element.attr(HOVER_ATTRIBUTE);
 
         return {
             id: parseInt($element.attr(dataIdKey), 10),
             left: removePx($element.css("left")),
             top: removePx($element.css("top")),
             width: removePx($element.css("width")) + BORDER_MODEL_DIFFERANCE,  // box model - border not included in widths
             height: removePx($element.css("height")) + BORDER_MODEL_DIFFERANCE, // box model - border not included in widths
-            selected: (!!selectedAttr) && selectedAttr == "true"
+            selected: (!!selectedAttr) && selectedAttr == "true",
+            hovering: (!!hoveringAttr) && hoveringAttr == "true"
         };
     };
 

src/components/directives/bawAnnotationViewer.js

@@ -199,9 +199,10 @@ bawds.directive('bawAnnotationViewer', [ 'conf.paths', 'AudioEvent', 'Tag', func
         console.debug("AnnotationEditor:drawaboxUpdatesModel:", action);
 
         // invariants
-        if (action === DRAWABOX_ACTION_SELECT && box.selected !== true) {
-            throw "AnnotationEditor:drawaboxUpdatesModel: Invariant failed for selection action";
-        }
+        // no longer true for hover state
+//        if (action === DRAWABOX_ACTION_SELECT && (box.selected !== true || box.hovering !== true)) {
+//            throw "AnnotationEditor:drawaboxUpdatesModel: Invariant failed for selection action";
+//        }
         if (action !== DRAWABOX_ACTION_SELECT && action !== DRAWABOX_ACTION_CREATE && box.selected !== annotation.selected) {
             throw "AnnotationEditor:drawaboxUpdatesModel: Invariant failed for non-selection action";
         }
@@ -237,6 +238,7 @@ bawds.directive('bawAnnotationViewer', [ 'conf.paths', 'AudioEvent', 'Tag', func
                 });
 
                 annotation.selected = box.selected;
+                annotation.hovering = box.hovering;
             }
             else {
                 // resize / move

src/components/models/annotation.js

@@ -66,6 +66,7 @@ baw.Annotation = (function () {
         this._epsilsonDirty = 0.0;
         this.isDirty = false;
         this.selected = false;
+        this.hovering = false;
         this.taggings = [];
         this.tags = [];