Fossil

Check-in [6fd91413]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:JavaScript graph drawing enhancements using an HTML5 canvas (if available) suggested by Joshua Paine.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1:6fd91413684c87f09a9f722df77a372f2a6fd1cd
User & Date: drh 2010-02-09 17:54:42
Context
2010-02-09
22:13
Not all tickets are "problems". Adjust label for "one-line summary" entry when creating new ticket. check-in: 2b79f36e user: bch tags: trunk
17:54
JavaScript graph drawing enhancements using an HTML5 canvas (if available) suggested by Joshua Paine. check-in: 6fd91413 user: drh tags: trunk
13:36
Enable the graph for tag timelines, but omit descenders. check-in: 22b6887e user: drh tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/timeline.c.

394
395
396
397
398
399
400

401
402
403
404
405
406
407
408
409
410
411
412
413







414
415
416
417
418
419
420
...
498
499
500
501
502
503
504

505
506
507
508
509



















510
511
512
513
514
515
516
      }
      if( cSep=='[' ) cgi_printf("[");
      cgi_printf("]}%s", pRow->pNext ? ",\n" : "];\n");
    }
    cgi_printf("var nrail = %d\n", pGraph->mxRail+1);
    graph_free(pGraph);
    @ var canvasDiv = document.getElementById("canvas");

    @ function drawBox(color,x0,y0,x1,y1){
    @   var n = document.createElement("div");
    @   if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
    @   if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
    @   var w = x1-x0+1;
    @   var h = y1-y0+1;
    @   n.innerHTML="<div style=\"position:absolute;overflow:hidden;"+
    @     "left:"+x0+"px;"+
    @     "top:"+y0+"px;"+
    @     "width:"+w+"px;"+
    @     "height:"+h+"px;"+
    @     "background-color:"+color+";\"></div>"
    @   canvasDiv.appendChild(n);







    @ }
    @ function absoluteY(id){
    @   var obj = document.getElementById(id);
    @   if( !obj ) return;
    @   var top = 0;
    @   if( obj.offsetParent ){
    @     do{
................................................................................
    @ function renderGraph(){
    @   var canvasDiv = document.getElementById("canvas");
    @   while( canvasDiv.hasChildNodes() ){
    @     canvasDiv.removeChild(canvasDiv.firstChild);
    @   }
    @   var canvasY = absoluteY("canvas");
    @   var left = absoluteX(rowinfo[0].id) - absoluteX("canvas") + 15;

    @   for(var i in rowinfo){
    @     rowinfo[i].y = absoluteY(rowinfo[i].id) + 10 - canvasY;
    @     rowinfo[i].x = left + rowinfo[i].r*20;
    @   }
    @   var btm = rowinfo[rowinfo.length-1].y + 20;



















    @   for(var i in rowinfo){
    @     drawNode(rowinfo[i], left, btm);
    @   }
    @ }
    @ var lastId = rowinfo[rowinfo.length-1].id;
    @ var lastY = 0;
    @ function checkHeight(){







>






<
<
<
<
<
<

>
>
>
>
>
>
>







 







>





>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







394
395
396
397
398
399
400
401
402
403
404
405
406
407






408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
...
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
      }
      if( cSep=='[' ) cgi_printf("[");
      cgi_printf("]}%s", pRow->pNext ? ",\n" : "];\n");
    }
    cgi_printf("var nrail = %d\n", pGraph->mxRail+1);
    graph_free(pGraph);
    @ var canvasDiv = document.getElementById("canvas");
    @ var realCanvas = null;
    @ function drawBox(color,x0,y0,x1,y1){
    @   var n = document.createElement("div");
    @   if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
    @   if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
    @   var w = x1-x0+1;
    @   var h = y1-y0+1;






    @   canvasDiv.appendChild(n);
    @   n.style.position = "absolute";
    @   n.style.overflow = "hidden";
    @   n.style.left = x0+"px";
    @   n.style.top = y0+"px";
    @   n.style.width = w+"px";
    @   n.style.height = h+"px";
    @   n.style.backgroundColor = color;
    @ }
    @ function absoluteY(id){
    @   var obj = document.getElementById(id);
    @   if( !obj ) return;
    @   var top = 0;
    @   if( obj.offsetParent ){
    @     do{
................................................................................
    @ function renderGraph(){
    @   var canvasDiv = document.getElementById("canvas");
    @   while( canvasDiv.hasChildNodes() ){
    @     canvasDiv.removeChild(canvasDiv.firstChild);
    @   }
    @   var canvasY = absoluteY("canvas");
    @   var left = absoluteX(rowinfo[0].id) - absoluteX("canvas") + 15;
    @   var width = left + nrail*20 + 20;
    @   for(var i in rowinfo){
    @     rowinfo[i].y = absoluteY(rowinfo[i].id) + 10 - canvasY;
    @     rowinfo[i].x = left + rowinfo[i].r*20;
    @   }
    @   var btm = rowinfo[rowinfo.length-1].y + 20;
    @   canvasDiv.innerHTML = '<canvas id="timeline-canvas" '+
    @      'style="position:absolute;left:'+(left-5)+'px;"' +
    @      ' width="'+(width-left+26)+'" height="'+btm+'"></canvas>';
    @   realCanvas = document.getElementById('timeline-canvas');
    @   var context;
    @   if( realCanvas && realCanvas.getContext
    @        && (context = realCanvas.getContext('2d'))) {
    @     drawBox = function(color,x0,y0,x1,y1) {
    @       var colors = {
    @          'white':'rgba(255,255,255,1)',
    @          'black':'rgba(0,0,0,1)'
    @       };
    @       if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
    @       if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
    @       if(isNaN(x0) || isNaN(y0) || isNaN(x1) || isNaN(y1)) return;
    @       context.fillStyle = colors[color];
    @       context.fillRect(x0-left+5,y0,x1-x0+1,y1-y0+1);
    @     };
    @   }
    @   for(var i in rowinfo){
    @     drawNode(rowinfo[i], left, btm);
    @   }
    @ }
    @ var lastId = rowinfo[rowinfo.length-1].id;
    @ var lastY = 0;
    @ function checkHeight(){