From 8a006ae223a0fec446eabd6f4a06a4d843e24446 Mon Sep 17 00:00:00 2001
From: Anthony Truskinger <anthony.truskinger@gmail.com>
Date: Sun, 1 Dec 2013 05:12:53 +1000
Subject: [PATCH] Tweaked some visual styles for box rendering (Fixes #4)

- Turned on Z-indexing for selected boxes.
- Improved hover behaviour / SELECTED behaviour so that tag preview link line shows more consistently
- Added a hovering state to the model
- Got the tag preview to hide its border (underline) and ensured it only showed when linked annotation was hovered over / selected
---
 .../annotationViewer/_annotation_viewer.scss   | 18 +++++++++++++++++-
 .../annotationViewer/annotationViewer.tpl.html |  1 +
 src/common/jquery.drawabox.js                  | 15 ++++++++++++++-
 .../directives/bawAnnotationViewer.js          |  8 +++++---
 src/components/models/annotation.js            |  1 +
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss
index b792fa77..61acadda 100644
--- a/src/app/annotationViewer/_annotation_viewer.scss
+++ b/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  {
diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html
index a8a9feda..1b13d55f 100644
--- a/src/app/annotationViewer/annotationViewer.tpl.html
+++ b/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)"
                     >
diff --git a/src/common/jquery.drawabox.js b/src/common/jquery.drawabox.js
index 0b68a3bf..2e1dc8fa 100644
--- a/src/common/jquery.drawabox.js
+++ b/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,6 +290,7 @@
 
     var getBox = function ($element) {
         var selectedAttr = $element.attr(SELECTED_ATTRIBUTE);
+        var hoveringAttr = $element.attr(HOVER_ATTRIBUTE);
 
         return {
             id: parseInt($element.attr(dataIdKey), 10),
@@ -286,7 +298,8 @@
             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"
         };
     };
 
diff --git a/src/components/directives/bawAnnotationViewer.js b/src/components/directives/bawAnnotationViewer.js
index 9df31bff..cc3f3bbc 100644
--- a/src/components/directives/bawAnnotationViewer.js
+++ b/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
diff --git a/src/components/models/annotation.js b/src/components/models/annotation.js
index 24bc6c5c..9b4dd1ff 100644
--- a/src/components/models/annotation.js
+++ b/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 = [];