Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | The tooltip over a graph node shows a link to the check-in or artifact that the node represents, not a link to the branch. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | descendants | both | tooltip-experiments |
| Files: | files | file ages | folders |
| SHA3-256: |
fa811f95c46f6d8180b758fd83fac4a5 |
| User & Date: | drh 2019-05-22 15:42:22.520 |
Context
|
2019-05-22
| ||
| 16:47 | CSS changes to the look of the tooltip. ... (check-in: b5cfa435f8 user: drh tags: tooltip-experiments) | |
| 15:42 | The tooltip over a graph node shows a link to the check-in or artifact that the node represents, not a link to the branch. ... (check-in: fa811f95c4 user: drh tags: tooltip-experiments) | |
| 14:34 | Additional simplification of the tooltip javascript. ... (check-in: c0f8f57835 user: drh tags: tooltip-experiments) | |
Changes
Changes to src/graph.js.
| ︙ | ︙ | |||
99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
window.tooltipInfo = {
dwellTimeout: 250, /* The tooltip dwell timeout. */
closeTimeout: 3000, /* The tooltip close timeout. */
idTimer: 0, /* The tooltip dwell timer id. */
idTimerClose: 0, /* The tooltip close timer id. */
ixHover: -1, /* The id of the element with the mouse. */
ixActive: -1, /* The id of the element with the tooltip. */
posX: 0, posY: 0 /* The last mouse position. */
};
/* Functions used to control the tooltip popup and its timer */
function hideGraphTooltip(){
stopCloseTimer();
tooltipObj.style.display = "none";
| > | 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
window.tooltipInfo = {
dwellTimeout: 250, /* The tooltip dwell timeout. */
closeTimeout: 3000, /* The tooltip close timeout. */
idTimer: 0, /* The tooltip dwell timer id. */
idTimerClose: 0, /* The tooltip close timer id. */
ixHover: -1, /* The id of the element with the mouse. */
ixActive: -1, /* The id of the element with the tooltip. */
nodeHover: null, /* Graph node under mouse when ixHover==-2 */
posX: 0, posY: 0 /* The last mouse position. */
};
/* Functions used to control the tooltip popup and its timer */
function hideGraphTooltip(){
stopCloseTimer();
tooltipObj.style.display = "none";
|
| ︙ | ︙ | |||
144 145 146 147 148 149 150 |
topObj.onclick = clickOnGraph
topObj.ondblclick = dblclickOnGraph
topObj.onmousemove = function(e) {
var ix = findTxIndex(e);
topObj.style.cursor = (ix<0) ? "" : "pointer"
/* Keep the already visible tooltip at a constant position, as long as the
** mouse is over the same element. */
| < < < < < < | < | > > > > > > > > > > > > > > > > > | 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 |
topObj.onclick = clickOnGraph
topObj.ondblclick = dblclickOnGraph
topObj.onmousemove = function(e) {
var ix = findTxIndex(e);
topObj.style.cursor = (ix<0) ? "" : "pointer"
/* Keep the already visible tooltip at a constant position, as long as the
** mouse is over the same element. */
if(tooltipObj.style.display != "none"){
if(ix == tooltipInfo.ixHover) return;
}
/* The tooltip is either not visible, or the mouse is over a different
** element, so clear the dwell timer, and record the new element id and
** mouse position. */
stopDwellTimer();
if(ix >= 0){
tooltipInfo.ixHover = ix;
tooltipInfo.posX = e.x;
tooltipInfo.posY = e.y;
stopCloseTimer();
if(tooltipInfo.dwellTimeout>0){
tooltipInfo.idTimer = setTimeout(function() {
tooltipInfo.idTimer = 0;
stopCloseTimer();
showGraphTooltip();
},tooltipInfo.dwellTimeout);
}
}else{
/* The mouse is not over an element with a tooltip */
tooltipInfo.ixHover = -1;
resumeCloseTimer();
}
};
topObj.onmouseleave = function(e) {
/* Hide the tooltip if the mouse is outside the "timelineTableN" element,
** and outside the tooltip. */
if(e.relatedTarget && e.relatedTarget != tooltipObj){
tooltipInfo.ixHover = -1;
hideGraphTooltip();
stopDwellTimer();
stopCloseTimer();
}
};
function nodeHover(e){
/* Invoked by mousemove events over a graph node */
e.stopPropagation()
if(tooltipInfo.ixHover==-2) return
tooltipInfo.ixHover = -2
tooltipInfo.posX = e.x
tooltipInfo.posY = e.y
tooltipInfo.nodeHover = this
stopCloseTimer();
if(tooltipInfo.dwellTimeout>0){
tooltipInfo.idTimer = setTimeout(function() {
tooltipInfo.idTimer = 0;
stopCloseTimer();
showGraphTooltip();
},tooltipInfo.dwellTimeout);
}
}
var canvasDiv;
var railPitch;
var mergeOffset;
var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;
function initGraph(){
var parent = topObj.rows[0].cells[1];
|
| ︙ | ︙ | |||
372 373 374 375 376 377 378 |
if( p.u>0 ) drawUpArrow(p,tx.rowinfo[p.u-tx.iTopRow],p.fg,p.id);
if( p.sb>0 ) drawDotted(p,tx.rowinfo[p.sb-tx.iTopRow],p.fg,p.id);
var cls = node.cls;
if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
if( p.f&1 ) cls += " leaf";
var n = drawBox(cls,p.bg,p.x,p.y);
n.id = "tln"+p.id;
| < > | 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 |
if( p.u>0 ) drawUpArrow(p,tx.rowinfo[p.u-tx.iTopRow],p.fg,p.id);
if( p.sb>0 ) drawDotted(p,tx.rowinfo[p.sb-tx.iTopRow],p.fg,p.id);
var cls = node.cls;
if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
if( p.f&1 ) cls += " leaf";
var n = drawBox(cls,p.bg,p.x,p.y);
n.id = "tln"+p.id;
n.onclick = clickOnNode;
n.ondblclick = dblclickOnNode;
n.onmousemove = nodeHover;
n.style.zIndex = 10;
if( !tx.omitDescenders ){
if( p.u==0 ){
if( p.hasOwnProperty('mo') && p.r==p.mo ){
var ix = p.hasOwnProperty('cu') ? p.cu : p.mu;
var top = tx.rowinfo[ix-tx.iTopRow]
drawUpArrow(p,{x: p.x, y: top.y-node.h}, p.fg, p.id);
|
| ︙ | ︙ | |||
574 575 576 577 578 579 580 |
function clickOnGraph(e){
tooltipInfo.ixHover = findTxIndex(e);
tooltipInfo.posX = e.x;
tooltipInfo.posY = e.y;
showGraphTooltip();
}
function showGraphTooltip(){
| > | | > > > > | > > > > > > > | | > > | | 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 |
function clickOnGraph(e){
tooltipInfo.ixHover = findTxIndex(e);
tooltipInfo.posX = e.x;
tooltipInfo.posY = e.y;
showGraphTooltip();
}
function showGraphTooltip(){
var html = null
if( tooltipInfo.ixHover==-2 ){
var ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
var h = tx.rowinfo[ix].h
var dest = tx.baseUrl + "/info/" + h
if( tx.fileDiff ){
html = "<a href=\""+dest+"\">artifact "+h+"</a>"
}else{
html = "<a href=\""+dest+"\">check-in "+h+"</a>"
}
}else if( tooltipInfo.ixHover>=0 ){
var ix = tooltipInfo.ixHover
var br = tx.rowinfo[ix].br
var dest = branchHyperlink(ix)
var hbr = br.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
html = "<a href=\""+dest+"\">"+hbr+"</a>"
tooltipInfo.ixActive = ix;
}
if( html ){
/* Setup while hidden, to ensure proper dimensions. */
tooltipObj.style.visibility = "hidden"
tooltipObj.innerHTML = html
tooltipObj.style.display = "inline"
tooltipObj.style.position = "absolute"
var x = tooltipInfo.posX + 4 + window.pageXOffset
tooltipObj.style.left = x+"px"
var y = tooltipInfo.posY + window.pageYOffset
- tooltipObj.clientHeight - 4
tooltipObj.style.top = y+"px"
tooltipObj.style.visibility = "visible"
}else{
hideGraphTooltip()
}
}
function dblclickOnGraph(e){
var ix = findTxIndex(e);
var dest = branchHyperlink(ix)
hideGraphTooltip()
window.location.href = dest
|
| ︙ | ︙ |