e325b487322b1ae05b838b968ee933718890ebb4 hiram Mon Oct 26 12:38:06 2020 -0700 begin transition to track specific mouse movement events refs #21980 diff --git src/hg/js/mouseOver.js src/hg/js/mouseOver.js index 3afe19a..0904f0e 100644 --- src/hg/js/mouseOver.js +++ src/hg/js/mouseOver.js @@ -13,63 +13,92 @@ // this boxCount is just for debugging information // ========================================================================= // intersect the point with the rectangle, where rect corners are x1,y1 x2,y2 // ========================================================================= function intersectPointRectangle(x,y, rect) { var answer = true; if (x <= rect.x1 || x > rect.x2) { answer = false; } else if (y <= rect.y1 || y > rect.y2) { answer = false; } return answer; } // given an X coordinate: x, find the index idx // in the rects[idx] array where rects[idx].x1 <= x < rects[idx].x2 // returning -1 when not found +// if we knew the array was sorted on x1 we could get out early +// when x < x1 function findRange(x, rects) { var answer = -1; for ( var idx in rects ) { if ((rects[idx].x1 <= x) && (x < rects[idx].x2)) { answer = idx; break; } } return answer; } function mouseInTrackImage(evt) { var trackName = evt.target.id.replace("img_data_", ""); var firstRect = ""; if (mapData.spans[trackName]) { var lastRect = mapData.spans[trackName].length - 1; firstRect = mapData.spans[trackName][lastRect].x1 + ".." + mapData.spans[trackName][lastRect].x2; } var evX = evt.x; var evY = evt.y; var oLeft = $(this).offset().left; var oTop = $(this).offset().top; var offLeft = Math.max(0, Math.floor(evt.x - $(this).offset().left)); - // need to find where offLeft is in the spans + var windowUp = false; // see if window is supposed to become visible var foundIdx = -1; var valP = "noX"; if (mapData.spans[trackName]) { foundIdx = findRange(offLeft, mapData.spans[trackName]); } - if (foundIdx > -1) { valP = mapData.spans[trackName][foundIdx].v; } + if (foundIdx > -1) { + valP = mapData.spans[trackName][foundIdx].v; + // value to display + var msg = " " + mapData.spans[trackName][foundIdx].v + " "; + $('#mouseOverText').html(msg); + var msgWidth = Math.ceil($('#mouseOverText').width()); + var msgHeight = Math.ceil($('#mouseOverText').height()); + var posLeft = (evt.x - msgWidth) + "px"; +// var posTop = (oTop + rect.y1) + "px"; + var posTop = oTop + "px"; + $('#mouseOverContainer').css('left',posLeft); + $('#mouseOverContainer').css('top',posTop); + windowUp = true; // yes, window is to become visible + } var offTop = Math.max(0, Math.floor(evt.y - $(this).offset().top)); var msg = "<p>. . . mouse in target.id: " + evt.target.id + "(" + trackName + ")[" + foundIdx + "]='" + valP + "' [" + firstRect + "] at " + offLeft + "," + offTop + ", evX,Y: " + evX + "," + evY + ", offL,T: " + oLeft + "," + oTop + "</p>"; $('#eventRects').html(msg); + if (windowUp) { // the window should become visible + if (! mapData.visible) { // should *NOT* have to keep track !*! + var contain = document.getElementById('mouseOverContainer'); + var mouseOver = document.querySelector(".wigMouseOver"); + mouseOver.classList.toggle("showMouseOver"); + mapData.visible = true; + } + } else { // the window should disappear + if (mapData.visible) { + var mouseOver = document.querySelector(".wigMouseOver"); + mouseOver.classList.toggle("showMouseOver"); + mapData.visible = false; + } + } // window visible/not visible } // ========================================================================= // receiveData() callback for successful JSON request, receives incoming JSON // data and gets it into global variables for use here. // The incoming 'arr' is a a set of objects where the object key name is // the track name, used here as an array reference: arr[trackName] // (currently only one object per json file, one file for each track, // this may change to have multiple tracks in one json file.) // The value associated with each track name // is an array of box definitions, where each element in the array is a // mapBox definition object: // {x1:n ,y1:n, x2:n, y2:n, value:s} // where n is an integer in the range: 0..width, // and s is the value string to display @@ -134,75 +163,30 @@ receiveData(mapData); } }; xmlhttp.open("GET", url, true); xmlhttp.send(); // sends request and exits this function // the onreadystatechange callback above will trigger // when the data has safely arrived } // function fetchMapData() // Mouse x,y positions arrive as fractions when the // WEB page is zoomed into to make the pixels larger. Hence the Math.floor // to keep them as integers. function mouseMoving(x, y) { var xyMouse = "<p>. . . mouse at x,y: " + Math.floor(x) + "," + Math.floor(y); $('#xyMouse').html(xyMouse); - if (typeof mapData.rects !== 'undefined') { // if there are rectangles - for (var i = 0; i < mapData.tracks.length; i++) { - var trackName = mapData.tracks[i]; - var imgData = "img_data_" + trackName; - var imgMap = document.getElementById(imgData); - var imageRect = imgMap.getBoundingClientRect(); - var imageTop = imageRect.top; - // x1,y1 are coordinates of mouse relative to the top,left corner of - // the browser tracks image - var x1 = x - Math.floor(imageRect.left); - var y1 = y - Math.floor(imageRect.top); - var windowUp = false; // see if window is supposed to become visible - - for (var rect of mapData.rects) { // work through rects list - if (intersectPointRectangle(x1,y1, rect)) { // found mouse in rect - var msg = " " + rect.v + " "; // value to display - $('#mouseOverText').html(msg); - var msgWidth = Math.ceil($('#mouseOverText').width()); - var msgHeight = Math.ceil($('#mouseOverText').height()); - var posLeft = (x - msgWidth) + "px"; - var posTop = (imageTop + rect.y1) + "px"; - $('#mouseOverContainer').css('left',posLeft); - $('#mouseOverContainer').css('top',posTop); - windowUp = true; // yes, window is to become visible - break; // can stop looking after first match - } - } - if (windowUp) { // the window should become visible - if (! mapData.visible) { // should *NOT* have to keep track !*! - var contain = document.getElementById('mouseOverContainer'); -// var text = document.getElementById('mouseOverText'); -// text.style.backgroundColor = "#ff69b4"; - var mouseOver = document.querySelector(".wigMouseOver"); - mouseOver.classList.toggle("showMouseOver"); - mapData.visible = true; - } - } else { // the window should disappear - if (mapData.visible) { - var mouseOver = document.querySelector(".wigMouseOver"); - mouseOver.classList.toggle("showMouseOver"); - mapData.visible = false; - } - } // window visible/not visible - } // for each track - } // if there are rectangles defined } // function mouseMoving(x, y) function getMouseOverData() { // there could be a number of these mouseOver class elements // there is one for each track that has this mouseOver data var x = document.getElementsByClassName("mouseOver"); for (var i = 0; i < x.length; i++) { var trashUrl = x[i].getAttribute('trashFile'); fetchMapData(trashUrl); } } function getMousePos(evt) { return { x: evt.clientX, y: evt.clientY }; }