ff29e6faa49df5473ddd5ef2bec9b4c33cfa588c chmalee Tue Aug 29 15:35:31 2023 -0700 Fix new mouseover code to account for track description heights, refs #31365 diff --git src/hg/js/utils.js src/hg/js/utils.js index 1afeead..9dc2ef1 100644 --- src/hg/js/utils.js +++ src/hg/js/utils.js @@ -3805,43 +3805,47 @@ btnWidth = label.getBoundingClientRect().width; } let imgWidth = refImgWidth; if (refEl.parentNode.name !== "ideoMap") { imgWidth -= labelWidth - btnWidth; } let refImgOffset = refImgRect.y + window.scrollY; // distance from start of image to top of viewport; [x1,y1,x2,y2] = refEl.coords.split(",").map(x => parseInt(x)); refX = x1; refY = y1; refWidth = x2 - x1; refHeight = y2 - y1; refRight = x2; refLeft = x1; refTop = y1; refBottom = y2; // now we need to offset our coordinates to the track tr, to account for dragReorder let parent = refEl.closest(".trDraggable"); + let currParentOffset = 0, yDiff = 0; if (refEl.parentNode.name === "ideoMap") { parent = refImg.closest("tr"); - let currParentOffset = parent.getBoundingClientRect().y; - let yDiff = y1; - refTop = currParentOffset + yDiff; - refBottom = currParentOffset + yDiff + refHeight; + currParentOffset = parent.getBoundingClientRect().y; + yDiff = y1; } else if (parent) { // how far in y direction we are from the tr start in the original image from the server: - let currParentOffset = parent.getBoundingClientRect().y; - let yDiff = y1 - hgTracks.trackDb[parent.id.slice(3)].imgOffsetY; + currParentOffset = parent.getBoundingClientRect().y; + yDiff = y1 - hgTracks.trackDb[parent.id.slice(3)].imgOffsetY; + // if track labels are on, then the imgOffsetY will be off by the track label amount + if (typeof hgTracks.centerLabelHeight !== 'undefined') { + yDiff += hgTracks.centerLabelHeight; + } + } + // account for dragReorder and track labels refTop = currParentOffset + yDiff; refBottom = currParentOffset + yDiff + refHeight; - } } else { rect = refEl.getBoundingClientRect(); refX = rect.x; refY = rect.y; refWidth = rect.width; refHeight = rect.height; refRight = rect.right; refLeft = rect.left; refTop = rect.top; refBottom = rect.bottom; } // figure out how large the mouseover will be // use firstChild because popUpEl should be a div with a sole child in it let popUpRect = popUpEl.firstChild.getBoundingClientRect(); // position the popUp to the right and above the cursor by default let topOffset = refTop - popUpRect.height; let leftOffset = mouseX + 15; // add 15 for large cursor sizes