Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
Comment: | Add tooltips to more elements. Click to jump to the branch displayed by the tooltip - except clicking no a node toggles the node selection on and off as it always has. |
---|---|
Downloads: | Tarball | ZIP archive |
Timelines: | family | ancestors | descendants | both | tooltips |
Files: | files | file ages | folders |
SHA3-256: |
804dbe0d5b35d1647d42c436befebbcc |
User & Date: | drh 2019-05-17 17:48:42.780 |
Context
2019-05-18
| ||
00:13 | Merge all enhancements from trunk. ... (check-in: 1989a13a user: drh tags: tooltips) | |
2019-05-17
| ||
17:48 | Add tooltips to more elements. Click to jump to the branch displayed by the tooltip - except clicking no a node toggles the node selection on and off as it always has. ... (check-in: 804dbe0d user: drh tags: tooltips) | |
16:45 | Proof-of-concept for how to pop up a tooltip when mousing over one of the branch arrows in a timeline graph. ... (check-in: 8e922935 user: drh tags: tooltips) | |
Changes
Changes to src/graph.js.
︙ | ︙ | |||
73 74 75 76 77 78 79 | document.querySelector("head").appendChild(style); } amendCssOnce = 0; } var tooltipObj = document.createElement("span"); tooltipObj.className = "tl-tooltip"; tooltipObj.style.visibility = "hidden"; | | | 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | document.querySelector("head").appendChild(style); } amendCssOnce = 0; } var tooltipObj = document.createElement("span"); tooltipObj.className = "tl-tooltip"; tooltipObj.style.visibility = "hidden"; document.getElementsByClassName("content")[0].appendChild(tooltipObj); function TimelineGraph(tx){ var topObj = document.getElementById("timelineTable"+tx.iTableId); amendCss(tx.circleNodes, tx.showArrowheads); var canvasDiv; var railPitch; var mergeOffset; |
︙ | ︙ | |||
195 196 197 198 199 200 201 | var y = to.y + node.h; var arrowSpace = from.y - y + (!from.id || from.r!=to.r ? node.h/2 : 0); var arw = arrowSpace < arrow.h*1.5 ? arrowSmall : arrow; var x = to.x + (node.w-line.w)/2; var y0 = from.y + node.h/2; var y1 = Math.ceil(to.y + node.h + arw.h/2); var n = drawLine(line,color,x,y0,null,y1); | < < | > | > > > > > > > > > | 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 | var y = to.y + node.h; var arrowSpace = from.y - y + (!from.id || from.r!=to.r ? node.h/2 : 0); var arw = arrowSpace < arrow.h*1.5 ? arrowSmall : arrow; var x = to.x + (node.w-line.w)/2; var y0 = from.y + node.h/2; var y1 = Math.ceil(to.y + node.h + arw.h/2); var n = drawLine(line,color,x,y0,null,y1); addToolTip(n,id) x = to.x + (node.w-arw.w)/2; n = drawBox(arw.cls,null,x,y); if(color) n.style.borderBottomColor = color; addToolTip(n,id) } function drawDotted(from,to,color,id){ var x = to.x + (node.w-line.w)/2; var y0 = from.y + node.h/2; var y1 = Math.ceil(to.y + node.h); var n = drawLine(dotLine,null,x,y0,null,y1) if( color ) n.style.borderColor = color addToolTip(n,id) } function addToolTip(n,id){ if( id ){ n.onmouseenter = tooltipEnter n.onmouseleave = tooltipLeave n.onclick = tooltipClick n.setAttribute("data-ix",id-tx.iTopRow) } } /* Draw thin horizontal or vertical lines representing merges */ function drawMergeLine(x0,y0,x1,y1){ drawLine(mLine,null,x0,y0,x1,y1); } function drawCherrypickLine(x0,y0,x1,y1){ drawLine(cpLine,null,x0,y0,x1,y1); |
︙ | ︙ | |||
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 | 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.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); }else if( p.y>100 ){ drawUpArrow(p,{x: p.x, y: p.y-50}, p.fg, p.id); }else{ drawUpArrow(p,{x: p.x, y: 0},p.fg, p.id); } } if( p.hasOwnProperty('d') ){ if( p.y + 150 >= btm ){ drawUpArrow({x: p.x, y: btm - node.h/2},p,p.fg,p.id); }else{ drawUpArrow({x: p.x, y: p.y+50},p,p.fg,p.id); | > | | 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 | 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; addToolTip(n,p.id) n.onclick = clickOnNode; 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); }else if( p.y>100 ){ drawUpArrow(p,{x: p.x, y: p.y-50}, p.fg, p.id); }else{ drawUpArrow(p,{x: p.x, y: 0},p.fg, p.id); } } if( p.hasOwnProperty('d') ){ if( p.y + 150 >= btm ){ drawUpArrow({x: p.x, y: btm - node.h/2},p,p.fg,p.id); }else{ drawUpArrow({x: p.x, y: p.y+50},p,p.fg,p.id); drawDotted({x: p.x, y: p.y+63},{x: p.x, y: p.y+50-node.h/2},p.fg,p.id); } } } if( p.hasOwnProperty('mo') ){ var x0 = p.x + node.w/2; var x1 = p.mo*railPitch + node.w/2; var u = tx.rowinfo[p.mu-tx.iTopRow]; |
︙ | ︙ | |||
414 415 416 417 418 419 420 | location.href=tx.baseUrl + "/fdiff?v1="+selRow.h+"&v2="+p.h }else{ location.href=tx.baseUrl + "/vdiff?from="+selRow.h+"&to="+p.h } } } function tooltipEnter(e){ | | | > > > > > > > | 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 | location.href=tx.baseUrl + "/fdiff?v1="+selRow.h+"&v2="+p.h }else{ location.href=tx.baseUrl + "/vdiff?from="+selRow.h+"&to="+p.h } } } function tooltipEnter(e){ var ix = this.getAttribute("data-ix") tooltipObj.textContent = tx.rowinfo[ix].br tooltipObj.style.display = "inline" tooltipObj.style.position = "absolute" var x = e.x + 4 + window.pageXOffset tooltipObj.style.left = x+"px" var y = e.y + window.pageYOffset - tooltipObj.clientHeight - 4 tooltipObj.style.top = y+"px" tooltipObj.style.visibility = "visible" } function tooltipClick(e){ var ix = this.getAttribute("data-ix") var br = tx.rowinfo[ix].br var dest = "/timeline?r=" + encodeURIComponent(br) tooltipObj.style.display = "none" window.location.href = tx.baseUrl + dest } function tooltipLeave(e){ tooltipObj.style.display = "none" } function changeDisplay(selector,value){ var x = document.getElementsByClassName(selector); var n = x.length; for(var i=0; i<n; i++) {x[i].style.display = value;} |
︙ | ︙ |