Fossil SCM

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.

drh 2019-05-17 17:48 tooltips
Commit 804dbe0d5b35d1647d42c436befebbcc2049da6e7b03eee4ba1c522fb4830fd1
Parent 8e922935feb9445…
1 file changed +24 -8
~ src/graph.js
M src/graph.js
+24 -8
--- src/graph.js
+++ src/graph.js
@@ -75,11 +75,11 @@
7575
 amendCssOnce = 0;
7676
 }
7777
 var tooltipObj = document.createElement("span");
7878
 tooltipObj.className = "tl-tooltip";
7979
 tooltipObj.style.visibility = "hidden";
80
-document.getElementsByTagName("BODY")[0].appendChild(tooltipObj);
80
+document.getElementsByClassName("content")[0].appendChild(tooltipObj);
8181
8282
 function TimelineGraph(tx){
8383
 var topObj = document.getElementById("timelineTable"+tx.iTableId);
8484
 amendCss(tx.circleNodes, tx.showArrowheads);
8585
 var canvasDiv;
@@ -197,23 +197,31 @@
197197
 var arw = arrowSpace < arrow.h*1.5 ? arrowSmall : arrow;
198198
 var x = to.x + (node.w-line.w)/2;
199199
 var y0 = from.y + node.h/2;
200200
 var y1 = Math.ceil(to.y + node.h + arw.h/2);
201201
 var n = drawLine(line,color,x,y0,null,y1);
202
- n.onmouseenter = tooltipEnter
203
- n.onmouseleave = tooltipLeave
204
- n.setAttribute("data-id",id)
202
+ addToolTip(n,id)
205203
 x = to.x + (node.w-arw.w)/2;
206204
 n = drawBox(arw.cls,null,x,y);
207205
 if(color) n.style.borderBottomColor = color;
206
+ addToolTip(n,id)
208207
 }
209
- function drawDotted(from,to,color){
208
+ function drawDotted(from,to,color,id){
210209
 var x = to.x + (node.w-line.w)/2;
211210
 var y0 = from.y + node.h/2;
212211
 var y1 = Math.ceil(to.y + node.h);
213212
 var n = drawLine(dotLine,null,x,y0,null,y1)
214213
 if( color ) n.style.borderColor = color
214
+ addToolTip(n,id)
215
+ }
216
+ function addToolTip(n,id){
217
+ if( id ){
218
+ n.onmouseenter = tooltipEnter
219
+ n.onmouseleave = tooltipLeave
220
+ n.onclick = tooltipClick
221
+ n.setAttribute("data-ix",id-tx.iTopRow)
222
+ }
215223
 }
216224
 /* Draw thin horizontal or vertical lines representing merges */
217225
 function drawMergeLine(x0,y0,x1,y1){
218226
 drawLine(mLine,null,x0,y0,x1,y1);
219227
 }
@@ -257,10 +265,11 @@
257265
 var cls = node.cls;
258266
 if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
259267
 if( p.f&1 ) cls += " leaf";
260268
 var n = drawBox(cls,p.bg,p.x,p.y);
261269
 n.id = "tln"+p.id;
270
+ addToolTip(n,p.id)
262271
 n.onclick = clickOnNode;
263272
 n.style.zIndex = 10;
264273
 if( !tx.omitDescenders ){
265274
 if( p.u==0 ){
266275
 if( p.hasOwnProperty('mo') && p.r==p.mo ){
@@ -276,11 +285,11 @@
276285
 if( p.hasOwnProperty('d') ){
277286
 if( p.y + 150 >= btm ){
278287
 drawUpArrow({x: p.x, y: btm - node.h/2},p,p.fg,p.id);
279288
 }else{
280289
 drawUpArrow({x: p.x, y: p.y+50},p,p.fg,p.id);
281
- drawDotted({x: p.x, y: p.y+63},{x: p.x, y: p.y+50-node.h/2},p.fg);
290
+ drawDotted({x: p.x, y: p.y+63},{x: p.x, y: p.y+50-node.h/2},p.fg,p.id);
282291
 }
283292
 }
284293
 }
285294
 if( p.hasOwnProperty('mo') ){
286295
 var x0 = p.x + node.w/2;
@@ -416,20 +425,27 @@
416425
 location.href=tx.baseUrl + "/vdiff?from="+selRow.h+"&to="+p.h
417426
 }
418427
 }
419428
 }
420429
 function tooltipEnter(e){
421
- var id = this.getAttribute("data-id")
422
- tooltipObj.textContent = tx.rowinfo[id-tx.iTopRow].br
430
+ var ix = this.getAttribute("data-ix")
431
+ tooltipObj.textContent = tx.rowinfo[ix].br
423432
 tooltipObj.style.display = "inline"
424433
 tooltipObj.style.position = "absolute"
425434
 var x = e.x + 4 + window.pageXOffset
426435
 tooltipObj.style.left = x+"px"
427436
 var y = e.y + window.pageYOffset - tooltipObj.clientHeight - 4
428437
 tooltipObj.style.top = y+"px"
429438
 tooltipObj.style.visibility = "visible"
430439
 }
440
+ function tooltipClick(e){
441
+ var ix = this.getAttribute("data-ix")
442
+ var br = tx.rowinfo[ix].br
443
+ var dest = "/timeline?r=" + encodeURIComponent(br)
444
+ tooltipObj.style.display = "none"
445
+ window.location.href = tx.baseUrl + dest
446
+ }
431447
 function tooltipLeave(e){
432448
 tooltipObj.style.display = "none"
433449
 }
434450
 function changeDisplay(selector,value){
435451
 var x = document.getElementsByClassName(selector);
436452
--- src/graph.js
+++ src/graph.js
@@ -75,11 +75,11 @@
75 amendCssOnce = 0;
76 }
77 var tooltipObj = document.createElement("span");
78 tooltipObj.className = "tl-tooltip";
79 tooltipObj.style.visibility = "hidden";
80 document.getElementsByTagName("BODY")[0].appendChild(tooltipObj);
81
82 function TimelineGraph(tx){
83 var topObj = document.getElementById("timelineTable"+tx.iTableId);
84 amendCss(tx.circleNodes, tx.showArrowheads);
85 var canvasDiv;
@@ -197,23 +197,31 @@
197 var arw = arrowSpace < arrow.h*1.5 ? arrowSmall : arrow;
198 var x = to.x + (node.w-line.w)/2;
199 var y0 = from.y + node.h/2;
200 var y1 = Math.ceil(to.y + node.h + arw.h/2);
201 var n = drawLine(line,color,x,y0,null,y1);
202 n.onmouseenter = tooltipEnter
203 n.onmouseleave = tooltipLeave
204 n.setAttribute("data-id",id)
205 x = to.x + (node.w-arw.w)/2;
206 n = drawBox(arw.cls,null,x,y);
207 if(color) n.style.borderBottomColor = color;
 
208 }
209 function drawDotted(from,to,color){
210 var x = to.x + (node.w-line.w)/2;
211 var y0 = from.y + node.h/2;
212 var y1 = Math.ceil(to.y + node.h);
213 var n = drawLine(dotLine,null,x,y0,null,y1)
214 if( color ) n.style.borderColor = color
 
 
 
 
 
 
 
 
 
215 }
216 /* Draw thin horizontal or vertical lines representing merges */
217 function drawMergeLine(x0,y0,x1,y1){
218 drawLine(mLine,null,x0,y0,x1,y1);
219 }
@@ -257,10 +265,11 @@
257 var cls = node.cls;
258 if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
259 if( p.f&1 ) cls += " leaf";
260 var n = drawBox(cls,p.bg,p.x,p.y);
261 n.id = "tln"+p.id;
 
262 n.onclick = clickOnNode;
263 n.style.zIndex = 10;
264 if( !tx.omitDescenders ){
265 if( p.u==0 ){
266 if( p.hasOwnProperty('mo') && p.r==p.mo ){
@@ -276,11 +285,11 @@
276 if( p.hasOwnProperty('d') ){
277 if( p.y + 150 >= btm ){
278 drawUpArrow({x: p.x, y: btm - node.h/2},p,p.fg,p.id);
279 }else{
280 drawUpArrow({x: p.x, y: p.y+50},p,p.fg,p.id);
281 drawDotted({x: p.x, y: p.y+63},{x: p.x, y: p.y+50-node.h/2},p.fg);
282 }
283 }
284 }
285 if( p.hasOwnProperty('mo') ){
286 var x0 = p.x + node.w/2;
@@ -416,20 +425,27 @@
416 location.href=tx.baseUrl + "/vdiff?from="+selRow.h+"&to="+p.h
417 }
418 }
419 }
420 function tooltipEnter(e){
421 var id = this.getAttribute("data-id")
422 tooltipObj.textContent = tx.rowinfo[id-tx.iTopRow].br
423 tooltipObj.style.display = "inline"
424 tooltipObj.style.position = "absolute"
425 var x = e.x + 4 + window.pageXOffset
426 tooltipObj.style.left = x+"px"
427 var y = e.y + window.pageYOffset - tooltipObj.clientHeight - 4
428 tooltipObj.style.top = y+"px"
429 tooltipObj.style.visibility = "visible"
430 }
 
 
 
 
 
 
 
431 function tooltipLeave(e){
432 tooltipObj.style.display = "none"
433 }
434 function changeDisplay(selector,value){
435 var x = document.getElementsByClassName(selector);
436
--- src/graph.js
+++ src/graph.js
@@ -75,11 +75,11 @@
75 amendCssOnce = 0;
76 }
77 var tooltipObj = document.createElement("span");
78 tooltipObj.className = "tl-tooltip";
79 tooltipObj.style.visibility = "hidden";
80 document.getElementsByClassName("content")[0].appendChild(tooltipObj);
81
82 function TimelineGraph(tx){
83 var topObj = document.getElementById("timelineTable"+tx.iTableId);
84 amendCss(tx.circleNodes, tx.showArrowheads);
85 var canvasDiv;
@@ -197,23 +197,31 @@
197 var arw = arrowSpace < arrow.h*1.5 ? arrowSmall : arrow;
198 var x = to.x + (node.w-line.w)/2;
199 var y0 = from.y + node.h/2;
200 var y1 = Math.ceil(to.y + node.h + arw.h/2);
201 var n = drawLine(line,color,x,y0,null,y1);
202 addToolTip(n,id)
 
 
203 x = to.x + (node.w-arw.w)/2;
204 n = drawBox(arw.cls,null,x,y);
205 if(color) n.style.borderBottomColor = color;
206 addToolTip(n,id)
207 }
208 function drawDotted(from,to,color,id){
209 var x = to.x + (node.w-line.w)/2;
210 var y0 = from.y + node.h/2;
211 var y1 = Math.ceil(to.y + node.h);
212 var n = drawLine(dotLine,null,x,y0,null,y1)
213 if( color ) n.style.borderColor = color
214 addToolTip(n,id)
215 }
216 function addToolTip(n,id){
217 if( id ){
218 n.onmouseenter = tooltipEnter
219 n.onmouseleave = tooltipLeave
220 n.onclick = tooltipClick
221 n.setAttribute("data-ix",id-tx.iTopRow)
222 }
223 }
224 /* Draw thin horizontal or vertical lines representing merges */
225 function drawMergeLine(x0,y0,x1,y1){
226 drawLine(mLine,null,x0,y0,x1,y1);
227 }
@@ -257,10 +265,11 @@
265 var cls = node.cls;
266 if( p.hasOwnProperty('mi') && p.mi.length ) cls += " merge";
267 if( p.f&1 ) cls += " leaf";
268 var n = drawBox(cls,p.bg,p.x,p.y);
269 n.id = "tln"+p.id;
270 addToolTip(n,p.id)
271 n.onclick = clickOnNode;
272 n.style.zIndex = 10;
273 if( !tx.omitDescenders ){
274 if( p.u==0 ){
275 if( p.hasOwnProperty('mo') && p.r==p.mo ){
@@ -276,11 +285,11 @@
285 if( p.hasOwnProperty('d') ){
286 if( p.y + 150 >= btm ){
287 drawUpArrow({x: p.x, y: btm - node.h/2},p,p.fg,p.id);
288 }else{
289 drawUpArrow({x: p.x, y: p.y+50},p,p.fg,p.id);
290 drawDotted({x: p.x, y: p.y+63},{x: p.x, y: p.y+50-node.h/2},p.fg,p.id);
291 }
292 }
293 }
294 if( p.hasOwnProperty('mo') ){
295 var x0 = p.x + node.w/2;
@@ -416,20 +425,27 @@
425 location.href=tx.baseUrl + "/vdiff?from="+selRow.h+"&to="+p.h
426 }
427 }
428 }
429 function tooltipEnter(e){
430 var ix = this.getAttribute("data-ix")
431 tooltipObj.textContent = tx.rowinfo[ix].br
432 tooltipObj.style.display = "inline"
433 tooltipObj.style.position = "absolute"
434 var x = e.x + 4 + window.pageXOffset
435 tooltipObj.style.left = x+"px"
436 var y = e.y + window.pageYOffset - tooltipObj.clientHeight - 4
437 tooltipObj.style.top = y+"px"
438 tooltipObj.style.visibility = "visible"
439 }
440 function tooltipClick(e){
441 var ix = this.getAttribute("data-ix")
442 var br = tx.rowinfo[ix].br
443 var dest = "/timeline?r=" + encodeURIComponent(br)
444 tooltipObj.style.display = "none"
445 window.location.href = tx.baseUrl + dest
446 }
447 function tooltipLeave(e){
448 tooltipObj.style.display = "none"
449 }
450 function changeDisplay(selector,value){
451 var x = document.getElementsByClassName(selector);
452

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button