src/hg/js/hgTracks.js 1.42
1.42 2009/09/16 17:34:00 tdreszer
A bit more cleanup and make sure that after doing the chromDrag selection no more chromDrag code is called.
Index: src/hg/js/hgTracks.js
===================================================================
RCS file: /projects/compbio/cvsroot/kent/src/hg/js/hgTracks.js,v
retrieving revision 1.41
retrieving revision 1.42
diff -b -B -U 4 -r1.41 -r1.42
--- src/hg/js/hgTracks.js 16 Sep 2009 00:40:57 -0000 1.41
+++ src/hg/js/hgTracks.js 16 Sep 2009 17:34:00 -0000 1.42
@@ -333,9 +333,9 @@
});
}
/////////////////////////////////////////////////////
-jQuery.fn.chromIdeo = function(){
+jQuery.fn.chromDrag = function(){
this.each(function(){
// Plan:
// mouseDown: determine where in map: convert to img location: pxDown
// mouseMove: flag drag
@@ -360,9 +360,10 @@
alert("chromIdeo(): failed to register "+this.id);
else {
hiliteSetup();
- $('.cytoBand').mousedown( function(e) {
+ $('.cytoBand').mousedown( function(e)
+ { // mousedown on chrom portion of image only (map items)
updateImgOffsets();
pxDown = e.clientX - img.scrolledLeft;
var pxY = e.clientY - img.scrolledTop;
if(mouseIsDown == false
@@ -374,14 +375,14 @@
$(document).bind( 'mouseup', chromUp);
hiliteShow(pxDown,pxDown);
return false;
}
- //else alert("out fo range pxY:"+pxY+" = (e.clientY:"+e.clientY+" - img.scrolledTop:"+img.scrolledTop+") body.scrollTop():"+$("body").scrollTop()+" range:"+chr.top+"-"+chr.bottom);
});
}
}
- function chromMove(e) {
+ function chromMove(e)
+ { // If mouse was down, determine if dragged, then show hilite
if ( mouseIsDown ) {
var pxX = e.clientX - img.scrolledLeft;
var relativeX = (pxX - pxDown);
if(mouseHasMoved || (mouseHasMoved == false && Math.abs(relativeX) > 2)) {
@@ -394,9 +395,12 @@
hiliteShow(pxDown,chr.right);
}
}
}
- function chromUp(e) { // Must be a separate function instead of pan.mouseup event.
+ function chromUp(e)
+ { // If mouse was down, handle final selection
+ $(document).unbind('mousemove',chromMove);
+ $(document).unbind('mouseup',chromUp);
chromMove(e); // Just in case
if(mouseIsDown) {
updateImgOffsets();
var bands;
@@ -419,21 +423,16 @@
hiliteShow(pxDown,pxUp);
}
}
else if(mouseHasMoved) {
- // bounded by chrom dimensions: but must remain within image!
- if( isWithin(-20,pxUp,chr.left) )
+ if( isWithin(-20,pxUp,chr.left) ) // bounded by chrom dimensions: but must remain within image!
pxUp = chr.left;
if( isWithin(chr.right,pxUp,chr.right + 30) )
pxUp = chr.right;
if( isWithin(chr.left,pxUp,chr.right) ) {
- //var offset = (pxDown - chr.left)/chr.width;
- //selRange.beg = Math.round(offset * chr.size);
selRange.beg = convertToBases(pxDown);
- //offset = (pxUp - chr.left)/chr.width;
- //selRange.end = Math.round(offset * chr.size);
selRange.end = convertToBases(pxUp);
if(Math.abs(selRange.end - selRange.beg) < 20)
mouseHasMoved = false; // Drag so small: treat as simple click
@@ -447,62 +446,56 @@
hiliteShow(pxUp,pxUp);
var curBeg = parseInt($("#hgt\\.winStart").val()); // Note the escaped '.'
var curEnd = parseInt($("#hgt\\.winEnd").val());
var curWidth = curEnd - curBeg;
- //var offset = (pxUp - chr.left)/chr.width;
- //selRange.beg = Math.round(offset * chr.size) - Math.round(curWidth/2); // Notice that beg is based upon up position
selRange.beg = convertToBases(pxUp) - Math.round(curWidth/2); // Notice that beg is based upon up position
selRange.end = selRange.beg + curWidth;
}
if(selRange.end > -1) {
// prompt, then submit for new position
- selRange = rangeNormaizeToChrom(selRange,chr);
+ selRange = rangeNormalizeToChrom(selRange,chr);
if(mouseHasMoved == false) { // Update highlight by converting bp back to pix
- //var offset = selRange.beg/chr.size;
- //pxDown = Math.round(offset * chr.width) + chr.left;
pxDown = convertFromBases(selRange.beg)
- //offset = selRange.end/chr.size;
- //pxUp = Math.round(offset * chr.width) + chr.left;
pxUp = convertFromBases(selRange.end)
hiliteShow(pxDown,pxUp);
}
- if(dontAsk || confirm("Jump to new position:\n\n"+chr.name+":"+commify(selRange.beg)+"-"+commify(selRange.end)+" size:"+commify(selRange.width) + (chr.reverse?" reversed":"") )) {
+ if(dontAsk || confirm("Jump to new position:\n\n"+chr.name+":"+commify(selRange.beg)+"-"+commify(selRange.end)+" size:"+commify(selRange.width)) ) {
setPositionByCoordinates(chr.name, selRange.beg, selRange.end)
+ $('.cytoBand').mousedown( function(e) { return false; }); // Stop the presses :0)
document.TrackHeaderForm.submit();
+ return true; // Make sure the setTimeout below is not called.
}
}
}
//else alert("chromIdeo("+chr.name+") NOT WITHIN VERTICAL RANGE\n selected range (pix):"+pxDown+"-"+pxUp+" chrom range (pix):"+chr.left+"-"+chr.right+"\n cytoTop-Bottom:"+chr.top +"-"+chr.bottom);
hiliteCancel();
- $(document).unbind('mousemove',chromMove);
- $(document).unbind('mouseup',chromUp);
setTimeout('blockUseMap=false;',50);
}
mouseIsDown = false;
mouseHasMoved = false;
}
function isWithin(beg,here,end)
- {
+ { // Simple utility
return ( beg <= here && here < end );
}
function convertToBases(pxX)
- {
+ { // Simple utility to convert pix to bases
var offset = (pxX - chr.left)/chr.width;
if(chr.reverse)
offset = 1 - offset;
return Math.round(offset * chr.size);
}
function convertFromBases(bases)
- {
+ { // Simple utility to convert bases to pix
var offset = bases/chr.size;
if(chr.reverse)
offset = 1 - offset;
return Math.round(offset * chr.width) + chr.left;
}
function findDimensions()
- {
+ { // Called at init: determine the dimensions of chrom from 'cytoband' map items
var lastX = -1;
$('.cytoBand').each(function(ix) {
var loc = this.coords.split(",");
if(loc.length == 4) {
@@ -548,11 +541,12 @@
chr.size = (chr.end - chr.beg );
chr.width = (chr.right - chr.left);
}
- function findCytoBand(pxDown,pxUp) {
+ function findCytoBand(pxDown,pxUp)
+ { // Called when mouseup and ctrl: Find the bounding cytoband dimensions, both in pix and bases
var cyto = { left: -1, right: -1, beg: -1, end: -1 };
- $('.cytoBand').each(function(t) {
+ $('.cytoBand').each(function(ix) {
var loc = this.coords.split(",");
if(loc.length == 4) {
var myLeft = parseInt(loc[0]);
var myRight = parseInt(loc[2]);
@@ -561,9 +555,9 @@
cyto.left = myLeft;
var range = this.title.substr(this.title.lastIndexOf(':')+1)
var pos = range.split('-');
if(pos.length == 2) {
- cyto.beg = parseInt(pos[0]);
+ cyto.beg = (chr.reverse ? parseInt(pos[1]) : parseInt(pos[0]));
}
}
}
if(cyto.right == -1 || cyto.right < myRight) {
@@ -571,18 +565,18 @@
cyto.right = myRight;
var range = this.title.substr(this.title.lastIndexOf(':')+1)
var pos = range.split('-');
if(pos.length == 2) {
- cyto.end = parseInt(pos[1]);
+ cyto.end = (chr.reverse ? parseInt(pos[0]) : parseInt(pos[1]));
}
}
}
}
});
return cyto;
}
- function rangeNormaizeToChrom(selection,chrom)
- {
+ function rangeNormalizeToChrom(selection,chrom)
+ { // Called before presenting or using base range: make sure chrom selection is within chrom range
if(selection.end < selection.beg) {
var tmp = selection.end;
selection.end = selection.beg;
selection.beg = tmp;
@@ -604,9 +598,9 @@
return selection;
}
function hiliteShow(down,cur)
- {
+ { // Called on mousemove, mouseup: set drag hilite dimensions
var topY = img.top;
var high = img.height;
var begX = -1;
var wide = -1;
@@ -620,15 +614,15 @@
$(hilite).css({ left: begX + 'px', width: wide + 'px', top: topY + 'px', height: high + 'px', display:'' });
$(hilite).show();
}
function hiliteCancel(left,width,top,height)
- {
+ { // Called on mouseup: Make green drag hilite disappear when no longer wanted
$(hilite).hide();
$(hilite).css({ left: '0px', width: '0px', top: '0px', height: '0px' });
}
function hiliteSetup()
- {
+ { // Called on init: setup of drag region hilite (but don't show yet)
$(hilite).css({ backgroundColor: 'green', opacity: 0.4, borderStyle: 'solid', borderWidth: '1px', bordercolor: '#0000FF' });
$p = $(chrImg);
$(hilite).css({ display: 'none', position: 'absolute', overflow: 'hidden', zIndex: 1 });
@@ -636,9 +630,9 @@
return hilite;
}
function updateImgOffsets()
- {
+ { // Called on mousedown: Gets the current offsets
var offs = $(chrImg).offset();
img.top = Math.round(offs.top );
img.left = Math.round(offs.left);
img.scrolledTop = img.top - $("body").scrollTop();
@@ -900,9 +894,9 @@
}
}
if($('img#chrom').length == 1) {
if($('.cytoBand').length > 1) {
- $('img#chrom').chromIdeo();
+ $('img#chrom').chromDrag();
}
}
});