Fossil

Check-in [529c07af]
Login

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

Overview
Comment:Display all check-in nodes as circles, color branch rails, use Xekri to demonstrate trunk rail controls
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | differentiate-timeline
Files: files | file ages | folders
SHA1:529c07af9861afc1bd3d6c08a0ed4e4b22ad665d
User & Date: jmoger 2015-03-19 17:53:07
Context
2015-03-19
19:12
Fix off-by-one with top-of-page descending rails check-in: 550f245a user: jmoger tags: differentiate-timeline
17:53
Display all check-in nodes as circles, color branch rails, use Xekri to demonstrate trunk rail controls check-in: 529c07af user: jmoger tags: differentiate-timeline
2015-03-18
16:45
Differentiate merge check-ins from regular, linear check-ins check-in: 9d39c6dc user: jmoger tags: differentiate-timeline
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/xekri/css.txt.

647
648
649
650
651
652
653
654


655
656
657
658
659
660
661
662
...
973
974
975
976
977
978
979
980


/**************************************
 * Timeline
 */

#canvas {
  color: #000;


  background-color: #fff;
}

div.divider {
  color: #ee0;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1rem;
................................................................................
tr.row0 {
  /* use default */
}
/* odd table row color */
tr.row1 {
  /* Use default */
}








|
>
>
|







 







<
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
...
975
976
977
978
979
980
981



/**************************************
 * Timeline
 */

#canvas {
  color: darkGray;
  border-color: black;
  outline-color: white;
  background-color: #0a0;
}

div.divider {
  color: #ee0;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1rem;
................................................................................
tr.row0 {
  /* use default */
}
/* odd table row color */
tr.row1 {
  /* Use default */
}

Changes to src/timeline.c.

710
711
712
713
714
715
716
717

718
719
720
721
722
723
724
...
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
...
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819


820

821
822
823

824
825
826
827
828
829
830
831
832
833
834
...
837
838
839
840
841
842
843

844
845
846

847
848
849
850
851
852
853
...
862
863
864
865
866
867
868

869
870
871
872
873
874
875
...
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
    cgi_printf("var nrail = %d\n", pGraph->mxRail+1);
    graph_free(pGraph);
    @ var cDiv = gebi("canvas");
    @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
    @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
    @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
    @ if( bgClr=='transparent' ) bgClr = 'white';
    @ var boxColor = lineClr;

    @ 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.style.position = "absolute";
................................................................................
    @   if( obj.offsetParent ){
    @     do{
    @       left += obj.offsetLeft;
    @     }while( obj = obj.offsetParent );
    @   }
    @   return left;
    @ }
    @ function drawUpArrow(x,y0,y1){
    @   drawBox(lineClr,x,y0+4,x+1,y1);
    @   var n = document.createElement("div"),
    @       l = x-2,
    @       t = y0;
    @   n.style.position = "absolute";
    @   n.style.left = l+"px";
    @   n.style.top = t+"px";
    @   n.style.width = 0;
    @   n.style.height = 0;
    @   n.style.transform = "scale(.999)";
    @   n.style.borderWidth = 0;
    @   n.style.borderStyle = "solid";
    @   n.style.borderColor = "transparent";
    @   n.style.borderRightWidth = "3px";
    @   n.style.borderBottomColor = lineClr;
    @   n.style.borderLeftWidth = "3px";
    @   if( y0+10>=y1 ){
    @     n.style.borderBottomWidth = "5px";
    @   } else {
    @     n.style.borderBottomWidth = "7px";
    @   }
    @   cDiv.appendChild(n);
    @ }
    @ function drawThinArrow(y,xFrom,xTo){
    @   var n = document.createElement("div"),
    @       t = y-2;
    @   n.style.position = "absolute";
    @   n.style.top = t+"px";
    @   n.style.width = 0;
................................................................................
    @     n.style.borderRightColor = lineClr;
    @   }
    @   cDiv.appendChild(n);
    @ }
    @ function drawThinLine(x0,y0,x1,y1){
    @   drawBox(lineClr,x0,y0,x1,y1);
    @ }
    @ function drawNodeBox(color,x0,y0,x1,y1,isMerge){
    @   var n = drawBox(color,x0,y0,x1,y1);
    @   n.style.cursor = "pointer";
    @   if ( !isMerge ) n.style.borderRadius = "6px";
    @ }
    @ function drawNode(p, left, btm){
    @   var isMerge = p.mi.length>0;
    @   drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6,isMerge);
    @   drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5,isMerge);
    @   if( p.u>0 ) drawUpArrow(p.x, rowinfo[p.u-1].y+6, p.y-5);
    @   if( p.f&1 ) drawNodeBox(boxColor,p.x-1,p.y-1,p.x+2,p.y+2,isMerge);


    if( !omitDescenders ){

      @   if( p.u==0 ) drawUpArrow(p.x, 0, p.y-5);
      @   if( p.d ) drawUpArrow(p.x, p.y+6, btm);
    }

    @   if( p.mo>0 ){
    @     var x1 = p.mo + left - 1;
    @     var y1 = p.y-3;
    @     var x0 = x1>p.x ? p.x+7 : p.x-6;
    @     var u = rowinfo[p.mu-1];
    @     var y0 = u.y+5;
    @     if( x1>=p.x-5 && x1<=p.x+5 ){
    @       y1 = p.y-5;
    @     }else{
    @       drawThinLine(x0,y1,x1,y1);
    @     }
................................................................................
    @   }
    @   var n = p.au.length;
    @   for(var i=0; i<n; i+=2){
    @     var x1 = p.au[i]*railPitch + left;
    @     var x0 = x1>p.x ? p.x+7 : p.x-6;
    @     var u = rowinfo[p.au[i+1]-1];
    @     if(u.id<p.id){

    @       drawBox(lineClr,x0,p.y,x1+1,p.y+1);
    @       drawUpArrow(x1, u.y+6, p.y);
    @     }else{

    @       drawBox("#600000",x0,p.y,x1,p.y+1);
    @       drawBox("#600000",x1-1,p.y,x1,u.y+1);
    @       drawBox("#600000",x1,u.y,u.x-10,u.y+1);
    @       var n = document.createElement("div"),
    @           t = u.y-2,
    @           l = u.x-11;
    @       n.style.position = "absolute";
................................................................................
    @       n.style.borderTopWidth = "3px";
    @       n.style.borderBottomWidth = "3px";
    @       n.style.borderLeftWidth = "7px";
    @       n.style.borderLeftColor = "#600000";
    @       cDiv.appendChild(n);
    @     }
    @   }

    @   for(var j in p.mi){
    @     var y0 = p.y+5;
    @     var mx = p.mi[j];
    @     if( mx<0 ){
    @       mx = left-mx;
    @       drawThinLine(mx,y0,mx,btm);
    @     }else{
................................................................................
    @       clickOnRow(p);
    @       break;
    @     }
    @   }
    @ }
    @ function clickOnRow(p){
    @   if( selRow==null ){
    @     selBox = drawBox("red",p.x-2,p.y-2,p.x+3,p.y+3);
    @     if ( p.mi.length==0 ) selBox.style.borderRadius="6px";
    @     selRow = p;
    @   }else if( selRow==p ){
    @     var canvasDiv = gebi("canvas");
    @     canvasDiv.removeChild(selBox);
    @     selBox = null;
    @     selRow = null;
    @   }else{







|
>







 







|
|
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







 







|


|


|
|
|
|
|
>
>

>
|
|

>



|







 







>
|
|

>







 







>







 







|
|







710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
...
750
751
752
753
754
755
756
757
758
759




















760
761
762
763
764
765
766
...
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
...
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
...
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
...
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
    cgi_printf("var nrail = %d\n", pGraph->mxRail+1);
    graph_free(pGraph);
    @ var cDiv = gebi("canvas");
    @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
    @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
    @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
    @ if( bgClr=='transparent' ) bgClr = 'white';
    @ var boxColor = (csty && csty.getPropertyValue('outline-color')) ||lineClr;
    @ var leafColor = (csty && csty.getPropertyValue('border-color')) ||lineClr;
    @ 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.style.position = "absolute";
................................................................................
    @   if( obj.offsetParent ){
    @     do{
    @       left += obj.offsetLeft;
    @     }while( obj = obj.offsetParent );
    @   }
    @   return left;
    @ }
    @ function drawRail(x,y0,y1,clr){
    @   if ( bgClr == clr ) clr = lineClr;
    @   drawBox(clr||lineClr,x,y0+1,x+1,y1);




















    @ }
    @ function drawThinArrow(y,xFrom,xTo){
    @   var n = document.createElement("div"),
    @       t = y-2;
    @   n.style.position = "absolute";
    @   n.style.top = t+"px";
    @   n.style.width = 0;
................................................................................
    @     n.style.borderRightColor = lineClr;
    @   }
    @   cDiv.appendChild(n);
    @ }
    @ function drawThinLine(x0,y0,x1,y1){
    @   drawBox(lineClr,x0,y0,x1,y1);
    @ }
    @ function drawNodeBox(color,x0,y0,x1,y1){
    @   var n = drawBox(color,x0,y0,x1,y1);
    @   n.style.cursor = "pointer";
    @  	n.style.borderRadius = "6px";
    @ }
    @ function drawNode(p, left, btm){
    @   /* Current CheckIn node */
    @   drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6);
    @   drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5);
    @   /* Leaf indicator for CheckIn node */
    @   if( p.f&1 ) drawNodeBox(leafColor,p.x-1,p.y-1,p.x+2,p.y+2);
    @   /* Branch rail to CheckIn's node */
    @   if( p.u>0 ) drawRail(p.x, rowinfo[p.u-1].y+6, p.y-6, rowinfo[p.u-1].bg);
    if( !omitDescenders ){
      @   /* Branch rails from bottom or to top of page */
      @   if( p.u==0 ) drawRail(p.x, 0, p.y-5,p.bg);
      @   if( p.d ) drawRail(p.x, p.y+6, btm,p.bg);
    }
    @   /* MergeOut horizontal rail */
    @   if( p.mo>0 ){
    @     var x1 = p.mo + left - 1;
    @     var y1 = p.y-3;
    @     var x0 = x1>p.x ? p.x+6 : p.x-6;
    @     var u = rowinfo[p.mu-1];
    @     var y0 = u.y+5;
    @     if( x1>=p.x-5 && x1<=p.x+5 ){
    @       y1 = p.y-5;
    @     }else{
    @       drawThinLine(x0,y1,x1,y1);
    @     }
................................................................................
    @   }
    @   var n = p.au.length;
    @   for(var i=0; i<n; i+=2){
    @     var x1 = p.au[i]*railPitch + left;
    @     var x0 = x1>p.x ? p.x+7 : p.x-6;
    @     var u = rowinfo[p.au[i+1]-1];
    @     if(u.id<p.id){
    @       /* Branch rail */
    @       drawBox(u.bg,x0,p.y,x1+1,p.y+1);
    @       drawRail(x1, u.y+6, p.y, u.bg);
    @     }else{
    @       /* Timewarp rail */
    @       drawBox("#600000",x0,p.y,x1,p.y+1);
    @       drawBox("#600000",x1-1,p.y,x1,u.y+1);
    @       drawBox("#600000",x1,u.y,u.x-10,u.y+1);
    @       var n = document.createElement("div"),
    @           t = u.y-2,
    @           l = u.x-11;
    @       n.style.position = "absolute";
................................................................................
    @       n.style.borderTopWidth = "3px";
    @       n.style.borderBottomWidth = "3px";
    @       n.style.borderLeftWidth = "7px";
    @       n.style.borderLeftColor = "#600000";
    @       cDiv.appendChild(n);
    @     }
    @   }
    @   /* MergeIn rails & arrows */
    @   for(var j in p.mi){
    @     var y0 = p.y+5;
    @     var mx = p.mi[j];
    @     if( mx<0 ){
    @       mx = left-mx;
    @       drawThinLine(mx,y0,mx,btm);
    @     }else{
................................................................................
    @       clickOnRow(p);
    @       break;
    @     }
    @   }
    @ }
    @ function clickOnRow(p){
    @   if( selRow==null ){
    @     selBox = drawBox("orange",p.x-2,p.y-2,p.x+3,p.y+3);
    @     selBox.style.borderRadius="6px";
    @     selRow = p;
    @   }else if( selRow==p ){
    @     var canvasDiv = gebi("canvas");
    @     canvasDiv.removeChild(selBox);
    @     selBox = null;
    @     selRow = null;
    @   }else{