d28c1fcec0aca9505cc4de7bc07e08ae976ba1ff
tdreszer
  Tue May 31 18:51:29 2011 -0700
Drag and drop of tracks in image will now drag contiguous set of subtracks if dragging side button.  Occasional wierdness when dragging too fast.
diff --git src/hg/js/hgTracks.js src/hg/js/hgTracks.js
index 061d5d3..817ae73 100644
--- src/hg/js/hgTracks.js
+++ src/hg/js/hgTracks.js
@@ -738,30 +738,66 @@
                 $(side).css('height',$(side).height() + centerHeight);
                 top += centerHeight; // top is a negative number
                 $(sideImg).css( {'top': top.toString() + "px" });
                 $( center ).show();
             } else if(!show) {
                 $(btn).css('height',$(btn).height() - centerHeight);
                 $(side).css('height',$(side).height() - centerHeight);
                 top -= centerHeight; // top is a negative number
                 $(sideImg).css( {'top': top.toString() + "px" });
                 $( center ).hide();
             }
         }
     }
 }
 
+function imgTblContiguousRowSet(row)
+{ // Returns the set of rows that are of the same class and contiguous
+    var btn = $( row ).find("p.btn");
+    if( btn.length == 0)
+        return null;
+    var classList = $( btn ).attr("class").split(" ");
+    var matchClass = classList[0];
+    var table = $(row).parents('table#imgTbl')[0];
+    var rows = $(table).find('tr');
+
+    // Find start index
+    var startIndex = $(row).attr('rowIndex');
+    var endIndex = startIndex;
+    for(var ix=startIndex-1;ix>=0;ix--) {
+        btn = $( rows[ix] ).find("p.btn");
+        if( btn.length == 0)
+            break;
+        classList = $( btn ).attr("class").split(" ");
+        if (classList[0] != matchClass)
+            break;
+        startIndex = ix;
+    }
+
+    // Find end index
+    for(var ix=endIndex;ix<rows.length;ix++) {
+        btn = $( rows[ix] ).find("p.btn");
+        if( btn.length == 0)
+            break;
+        classList = $( btn ).attr("class").split(" ");
+        if (classList[0] != matchClass)
+            break;
+        endIndex = ix;
+    }
+    return rows.slice(startIndex,endIndex+1); // endIndex is 1 based!
+}
+
 function imgTblZipButtons(table)
 {
 // Goes through the image and binds composite track buttons when adjacent
     var rows = $(table).find('tr');
     var lastClass="";
     var lastBtn;
     var lastMatchesLast=false;
     var lastBlue=true;
     var altColors=false;
     var count=0;
     var countN=0;
     for(var ix=0;ix<rows.length;ix++) {    // Need to have buttons in order
         var btn = $( rows[ix] ).find("p.btn");
         if( btn.length == 0)
             continue;
@@ -856,40 +892,48 @@
 
 function imgTblDragHandleMouseOut()
 {
 // Ends row highlighting by mouse over
     $( this ).parents("tr").removeClass("trDrag");
 }
 
 function imgTblButtonMouseOver()
 {
 // Highlights a composite set of buttons, regarless of whether tracks are adjacent
     if(jQuery.tableDnD == undefined || jQuery.tableDnD.dragObject == null) {
         var classList = $( this ).attr("class").split(" ");
         var btns = $( "p." + classList[0] );
         $( btns ).removeClass('btnGrey');
         $( btns ).addClass('btnBlue');
+        if (jQuery.tableDnD != undefined) {
+            var rows = imgTblContiguousRowSet($(this).parents('tr.trDraggable')[0])
+            $( rows ).addClass("trDrag");
+        }
     }
 }
 
 function imgTblButtonMouseOut()
 {
 // Ends composite highlighting by mouse over
     var classList = $( this ).attr("class").split(" ");
     var btns = $( "p." + classList[0] );
     $( btns ).removeClass('btnBlue');
     $( btns ).addClass('btnGrey');
+    if (jQuery.tableDnD != undefined) {
+        var rows = imgTblContiguousRowSet($(this).parents('tr.trDraggable')[0])
+        $( rows ).removeClass("trDrag");
+    }
 }
 
 
 /////////////////////////////////////////////////////
 // Drag Scroll code
 jQuery.fn.panImages = function(imgOffset,imgBoxLeftOffset){
     // globals across all panImages
     var leftLimit   = imgBoxLeftOffset*-1;
     var rightLimit  = (imgBoxPortalWidth - imgBoxWidth + leftLimit);
     var prevX       = (imgOffset + imgBoxLeftOffset)*-1;
     var portalWidth = 0;
     panAdjustHeight(prevX);
 
 this.each(function(){
 
@@ -915,31 +959,30 @@
     var newX        = 0;
     var mouseDownX  = 0;
     var mouseIsDown = false;
     var beyondImage = false;
     var atEdge      = false;
 
     initialize();
 
     function initialize(){
 
         pan.css( 'cursor', 'w-resize');
 
         pan.mousedown(function(e){
             if(mouseIsDown == false) {
                 mouseIsDown = true;
-
                 mouseDownX = e.clientX;
                 atEdge = (!beyondImage && (prevX >= leftLimit || prevX <= rightLimit));
                 $(document).bind('mousemove',panner);
                 $(document).bind( 'mouseup', panMouseUp);  // Will exec only once
                 return false;
             }
         });
     }
 
     function panner(e) {
         //if(!e) e = window.event;
         if ( mouseIsDown ) {
             var relativeX = (e.clientX - mouseDownX);
 
             if(relativeX != 0) {
@@ -1262,33 +1305,42 @@
         });
     }
     if($('#imgTbl').length == 1) {
         imageV2   = true;
         initImgTblButtons();
         // Make imgTbl allow draw reorder of imgTrack rows
         var imgTable = $(".tableWithDragAndDrop");
         if($(imgTable).length > 0) {
             $(imgTable).tableDnD({
                 onDragClass: "trDrag",
                 dragHandle: "dragHandle",
                 scrollAmount: 40,
                 onDragStart: function(ev, table, row) {
                     saveMouseOffset(ev);
                     $(document).bind('mousemove',blockTheMapOnMouseMove);
+
+                    // Can drag a contiguous set of rows if dragging blue button
+                    table.tableDnDConfig.dragObjects = [ row ]; // defaults to just the one
+                    var btn = $( row ).find('p.btnBlue');  // btnBlue means cursor over left button
+                    if (btn.length == 1) {
+                        table.tableDnDConfig.dragObjects = imgTblContiguousRowSet(row);
+                    }
                 },
                 onDrop: function(table, row, dragStartIndex) {
                     if($(row).attr('rowIndex') != dragStartIndex) {
+                        // NOTE Even if dragging a contiguous set of rows,
+                        // still only need to check the one under the cursor.
                         if(imgTblSetOrder) {
                             imgTblSetOrder(table);
                         }
                         imgTblZipButtons( table );
                     }
                     $(document).unbind('mousemove',blockTheMapOnMouseMove);
                     setTimeout('blockUseMap=false;',50); // Necessary incase the onDrop was over a map item. onDrop takes precedence.
                 }
             });
         }
         if(imgBoxPortal) {
             //warn("imgBox("+imgBoxChromStart+"-"+imgBoxChromEnd+","+imgBoxWidth+") bases/pix:"+imgBoxBasesPerPixel+"\nportal("+imgBoxPortalStart+"-"+imgBoxPortalEnd+","+imgBoxPortalWidth+") offset:"+imgBoxPortalOffsetX);
 
             // Turn on drag scrolling.
             $("div.scroller").panImages(imgBoxPortalOffsetX,imgBoxLeftLabel);