Fossil SCM

Display all check-in nodes as circles, color branch rails, use Xekri to demonstrate trunk rail controls

jmoger 2015-03-19 17:53 differentiate-timeline
Commit 529c07af9861afc1bd3d6c08a0ed4e4b22ad665d
Parent 9d39c6dca7be279…
2 files changed +4 -3 +26 -38
~ skins/xekri/css.txt ~ src/timeline.c
M skins/xekri/css.txt
+4 -3
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -649,12 +649,14 @@
649649
 /**************************************
650650
 * Timeline
651651
 */
652652
653653
 #canvas {
654
- color: #000;
655
- background-color: #fff;
654
+ color: darkGray;
655
+ border-color: black;
656
+ outline-color: white;
657
+ background-color: #0a0;
656658
 }
657659
658660
 div.divider {
659661
 color: #ee0;
660662
 font-size: 1.2rem;
@@ -975,6 +977,5 @@
975977
 }
976978
 /* odd table row color */
977979
 tr.row1 {
978980
 /* Use default */
979981
 }
980
-
981982
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -649,12 +649,14 @@
649 /**************************************
650 * Timeline
651 */
652
653 #canvas {
654 color: #000;
655 background-color: #fff;
 
 
656 }
657
658 div.divider {
659 color: #ee0;
660 font-size: 1.2rem;
@@ -975,6 +977,5 @@
975 }
976 /* odd table row color */
977 tr.row1 {
978 /* Use default */
979 }
980
981
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -649,12 +649,14 @@
649 /**************************************
650 * Timeline
651 */
652
653 #canvas {
654 color: darkGray;
655 border-color: black;
656 outline-color: white;
657 background-color: #0a0;
658 }
659
660 div.divider {
661 color: #ee0;
662 font-size: 1.2rem;
@@ -975,6 +977,5 @@
977 }
978 /* odd table row color */
979 tr.row1 {
980 /* Use default */
981 }
 
982
M src/timeline.c
+26 -38
--- src/timeline.c
+++ src/timeline.c
@@ -712,11 +712,12 @@
712712
 @ var cDiv = gebi("canvas");
713713
 @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
714714
 @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
715715
 @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
716716
 @ if( bgClr=='transparent' ) bgClr = 'white';
717
- @ var boxColor = lineClr;
717
+ @ var boxColor = (csty && csty.getPropertyValue('outline-color')) ||lineClr;
718
+ @ var leafColor = (csty && csty.getPropertyValue('border-color')) ||lineClr;
718719
 @ function drawBox(color,x0,y0,x1,y1){
719720
 @ var n = document.createElement("div");
720721
 @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
721722
 @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
722723
 @ var w = x1-x0+1;
@@ -751,33 +752,13 @@
751752
 @ left += obj.offsetLeft;
752753
 @ }while( obj = obj.offsetParent );
753754
 @ }
754755
 @ return left;
755756
 @ }
756
- @ function drawUpArrow(x,y0,y1){
757
- @ drawBox(lineClr,x,y0+4,x+1,y1);
758
- @ var n = document.createElement("div"),
759
- @ l = x-2,
760
- @ t = y0;
761
- @ n.style.position = "absolute";
762
- @ n.style.left = l+"px";
763
- @ n.style.top = t+"px";
764
- @ n.style.width = 0;
765
- @ n.style.height = 0;
766
- @ n.style.transform = "scale(.999)";
767
- @ n.style.borderWidth = 0;
768
- @ n.style.borderStyle = "solid";
769
- @ n.style.borderColor = "transparent";
770
- @ n.style.borderRightWidth = "3px";
771
- @ n.style.borderBottomColor = lineClr;
772
- @ n.style.borderLeftWidth = "3px";
773
- @ if( y0+10>=y1 ){
774
- @ n.style.borderBottomWidth = "5px";
775
- @ } else {
776
- @ n.style.borderBottomWidth = "7px";
777
- @ }
778
- @ cDiv.appendChild(n);
757
+ @ function drawRail(x,y0,y1,clr){
758
+ @ if ( bgClr == clr ) clr = lineClr;
759
+ @ drawBox(clr||lineClr,x,y0+1,x+1,y1);
779760
 @ }
780761
 @ function drawThinArrow(y,xFrom,xTo){
781762
 @ var n = document.createElement("div"),
782763
 @ t = y-2;
783764
 @ n.style.position = "absolute";
@@ -804,29 +785,33 @@
804785
 @ cDiv.appendChild(n);
805786
 @ }
806787
 @ function drawThinLine(x0,y0,x1,y1){
807788
 @ drawBox(lineClr,x0,y0,x1,y1);
808789
 @ }
809
- @ function drawNodeBox(color,x0,y0,x1,y1,isMerge){
790
+ @ function drawNodeBox(color,x0,y0,x1,y1){
810791
 @ var n = drawBox(color,x0,y0,x1,y1);
811792
 @ n.style.cursor = "pointer";
812
- @ if ( !isMerge ) n.style.borderRadius = "6px";
793
+ @ n.style.borderRadius = "6px";
813794
 @ }
814795
 @ function drawNode(p, left, btm){
815
- @ var isMerge = p.mi.length>0;
816
- @ drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6,isMerge);
817
- @ drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5,isMerge);
818
- @ if( p.u>0 ) drawUpArrow(p.x, rowinfo[p.u-1].y+6, p.y-5);
819
- @ if( p.f&1 ) drawNodeBox(boxColor,p.x-1,p.y-1,p.x+2,p.y+2,isMerge);
796
+ @ /* Current CheckIn node */
797
+ @ drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6);
798
+ @ drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5);
799
+ @ /* Leaf indicator for CheckIn node */
800
+ @ if( p.f&1 ) drawNodeBox(leafColor,p.x-1,p.y-1,p.x+2,p.y+2);
801
+ @ /* Branch rail to CheckIn's node */
802
+ @ if( p.u>0 ) drawRail(p.x, rowinfo[p.u-1].y+6, p.y-6, rowinfo[p.u-1].bg);
820803
 if( !omitDescenders ){
821
- @ if( p.u==0 ) drawUpArrow(p.x, 0, p.y-5);
822
- @ if( p.d ) drawUpArrow(p.x, p.y+6, btm);
804
+ @ /* Branch rails from bottom or to top of page */
805
+ @ if( p.u==0 ) drawRail(p.x, 0, p.y-5,p.bg);
806
+ @ if( p.d ) drawRail(p.x, p.y+6, btm,p.bg);
823807
 }
808
+ @ /* MergeOut horizontal rail */
824809
 @ if( p.mo>0 ){
825810
 @ var x1 = p.mo + left - 1;
826811
 @ var y1 = p.y-3;
827
- @ var x0 = x1>p.x ? p.x+7 : p.x-6;
812
+ @ var x0 = x1>p.x ? p.x+6 : p.x-6;
828813
 @ var u = rowinfo[p.mu-1];
829814
 @ var y0 = u.y+5;
830815
 @ if( x1>=p.x-5 && x1<=p.x+5 ){
831816
 @ y1 = p.y-5;
832817
 @ }else{
@@ -839,13 +824,15 @@
839824
 @ for(var i=0; i<n; i+=2){
840825
 @ var x1 = p.au[i]*railPitch + left;
841826
 @ var x0 = x1>p.x ? p.x+7 : p.x-6;
842827
 @ var u = rowinfo[p.au[i+1]-1];
843828
 @ if(u.id<p.id){
844
- @ drawBox(lineClr,x0,p.y,x1+1,p.y+1);
845
- @ drawUpArrow(x1, u.y+6, p.y);
829
+ @ /* Branch rail */
830
+ @ drawBox(u.bg,x0,p.y,x1+1,p.y+1);
831
+ @ drawRail(x1, u.y+6, p.y, u.bg);
846832
 @ }else{
833
+ @ /* Timewarp rail */
847834
 @ drawBox("#600000",x0,p.y,x1,p.y+1);
848835
 @ drawBox("#600000",x1-1,p.y,x1,u.y+1);
849836
 @ drawBox("#600000",x1,u.y,u.x-10,u.y+1);
850837
 @ var n = document.createElement("div"),
851838
 @ t = u.y-2,
@@ -864,10 +851,11 @@
864851
 @ n.style.borderLeftWidth = "7px";
865852
 @ n.style.borderLeftColor = "#600000";
866853
 @ cDiv.appendChild(n);
867854
 @ }
868855
 @ }
856
+ @ /* MergeIn rails & arrows */
869857
 @ for(var j in p.mi){
870858
 @ var y0 = p.y+5;
871859
 @ var mx = p.mi[j];
872860
 @ if( mx<0 ){
873861
 @ mx = left-mx;
@@ -926,12 +914,12 @@
926914
 @ }
927915
 @ }
928916
 @ }
929917
 @ function clickOnRow(p){
930918
 @ if( selRow==null ){
931
- @ selBox = drawBox("red",p.x-2,p.y-2,p.x+3,p.y+3);
932
- @ if ( p.mi.length==0 ) selBox.style.borderRadius="6px";
919
+ @ selBox = drawBox("orange",p.x-2,p.y-2,p.x+3,p.y+3);
920
+ @ selBox.style.borderRadius="6px";
933921
 @ selRow = p;
934922
 @ }else if( selRow==p ){
935923
 @ var canvasDiv = gebi("canvas");
936924
 @ canvasDiv.removeChild(selBox);
937925
 @ selBox = null;
938926
--- src/timeline.c
+++ src/timeline.c
@@ -712,11 +712,12 @@
712 @ var cDiv = gebi("canvas");
713 @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
714 @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
715 @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
716 @ if( bgClr=='transparent' ) bgClr = 'white';
717 @ var boxColor = lineClr;
 
718 @ function drawBox(color,x0,y0,x1,y1){
719 @ var n = document.createElement("div");
720 @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
721 @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
722 @ var w = x1-x0+1;
@@ -751,33 +752,13 @@
751 @ left += obj.offsetLeft;
752 @ }while( obj = obj.offsetParent );
753 @ }
754 @ return left;
755 @ }
756 @ function drawUpArrow(x,y0,y1){
757 @ drawBox(lineClr,x,y0+4,x+1,y1);
758 @ var n = document.createElement("div"),
759 @ l = x-2,
760 @ t = y0;
761 @ n.style.position = "absolute";
762 @ n.style.left = l+"px";
763 @ n.style.top = t+"px";
764 @ n.style.width = 0;
765 @ n.style.height = 0;
766 @ n.style.transform = "scale(.999)";
767 @ n.style.borderWidth = 0;
768 @ n.style.borderStyle = "solid";
769 @ n.style.borderColor = "transparent";
770 @ n.style.borderRightWidth = "3px";
771 @ n.style.borderBottomColor = lineClr;
772 @ n.style.borderLeftWidth = "3px";
773 @ if( y0+10>=y1 ){
774 @ n.style.borderBottomWidth = "5px";
775 @ } else {
776 @ n.style.borderBottomWidth = "7px";
777 @ }
778 @ cDiv.appendChild(n);
779 @ }
780 @ function drawThinArrow(y,xFrom,xTo){
781 @ var n = document.createElement("div"),
782 @ t = y-2;
783 @ n.style.position = "absolute";
@@ -804,29 +785,33 @@
804 @ cDiv.appendChild(n);
805 @ }
806 @ function drawThinLine(x0,y0,x1,y1){
807 @ drawBox(lineClr,x0,y0,x1,y1);
808 @ }
809 @ function drawNodeBox(color,x0,y0,x1,y1,isMerge){
810 @ var n = drawBox(color,x0,y0,x1,y1);
811 @ n.style.cursor = "pointer";
812 @ if ( !isMerge ) n.style.borderRadius = "6px";
813 @ }
814 @ function drawNode(p, left, btm){
815 @ var isMerge = p.mi.length>0;
816 @ drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6,isMerge);
817 @ drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5,isMerge);
818 @ if( p.u>0 ) drawUpArrow(p.x, rowinfo[p.u-1].y+6, p.y-5);
819 @ if( p.f&1 ) drawNodeBox(boxColor,p.x-1,p.y-1,p.x+2,p.y+2,isMerge);
 
 
820 if( !omitDescenders ){
821 @ if( p.u==0 ) drawUpArrow(p.x, 0, p.y-5);
822 @ if( p.d ) drawUpArrow(p.x, p.y+6, btm);
 
823 }
 
824 @ if( p.mo>0 ){
825 @ var x1 = p.mo + left - 1;
826 @ var y1 = p.y-3;
827 @ var x0 = x1>p.x ? p.x+7 : p.x-6;
828 @ var u = rowinfo[p.mu-1];
829 @ var y0 = u.y+5;
830 @ if( x1>=p.x-5 && x1<=p.x+5 ){
831 @ y1 = p.y-5;
832 @ }else{
@@ -839,13 +824,15 @@
839 @ for(var i=0; i<n; i+=2){
840 @ var x1 = p.au[i]*railPitch + left;
841 @ var x0 = x1>p.x ? p.x+7 : p.x-6;
842 @ var u = rowinfo[p.au[i+1]-1];
843 @ if(u.id<p.id){
844 @ drawBox(lineClr,x0,p.y,x1+1,p.y+1);
845 @ drawUpArrow(x1, u.y+6, p.y);
 
846 @ }else{
 
847 @ drawBox("#600000",x0,p.y,x1,p.y+1);
848 @ drawBox("#600000",x1-1,p.y,x1,u.y+1);
849 @ drawBox("#600000",x1,u.y,u.x-10,u.y+1);
850 @ var n = document.createElement("div"),
851 @ t = u.y-2,
@@ -864,10 +851,11 @@
864 @ n.style.borderLeftWidth = "7px";
865 @ n.style.borderLeftColor = "#600000";
866 @ cDiv.appendChild(n);
867 @ }
868 @ }
 
869 @ for(var j in p.mi){
870 @ var y0 = p.y+5;
871 @ var mx = p.mi[j];
872 @ if( mx<0 ){
873 @ mx = left-mx;
@@ -926,12 +914,12 @@
926 @ }
927 @ }
928 @ }
929 @ function clickOnRow(p){
930 @ if( selRow==null ){
931 @ selBox = drawBox("red",p.x-2,p.y-2,p.x+3,p.y+3);
932 @ if ( p.mi.length==0 ) selBox.style.borderRadius="6px";
933 @ selRow = p;
934 @ }else if( selRow==p ){
935 @ var canvasDiv = gebi("canvas");
936 @ canvasDiv.removeChild(selBox);
937 @ selBox = null;
938
--- src/timeline.c
+++ src/timeline.c
@@ -712,11 +712,12 @@
712 @ var cDiv = gebi("canvas");
713 @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
714 @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
715 @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
716 @ if( bgClr=='transparent' ) bgClr = 'white';
717 @ var boxColor = (csty && csty.getPropertyValue('outline-color')) ||lineClr;
718 @ var leafColor = (csty && csty.getPropertyValue('border-color')) ||lineClr;
719 @ function drawBox(color,x0,y0,x1,y1){
720 @ var n = document.createElement("div");
721 @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
722 @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
723 @ var w = x1-x0+1;
@@ -751,33 +752,13 @@
752 @ left += obj.offsetLeft;
753 @ }while( obj = obj.offsetParent );
754 @ }
755 @ return left;
756 @ }
757 @ function drawRail(x,y0,y1,clr){
758 @ if ( bgClr == clr ) clr = lineClr;
759 @ drawBox(clr||lineClr,x,y0+1,x+1,y1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
760 @ }
761 @ function drawThinArrow(y,xFrom,xTo){
762 @ var n = document.createElement("div"),
763 @ t = y-2;
764 @ n.style.position = "absolute";
@@ -804,29 +785,33 @@
785 @ cDiv.appendChild(n);
786 @ }
787 @ function drawThinLine(x0,y0,x1,y1){
788 @ drawBox(lineClr,x0,y0,x1,y1);
789 @ }
790 @ function drawNodeBox(color,x0,y0,x1,y1){
791 @ var n = drawBox(color,x0,y0,x1,y1);
792 @ n.style.cursor = "pointer";
793 @ n.style.borderRadius = "6px";
794 @ }
795 @ function drawNode(p, left, btm){
796 @ /* Current CheckIn node */
797 @ drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6);
798 @ drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5);
799 @ /* Leaf indicator for CheckIn node */
800 @ if( p.f&1 ) drawNodeBox(leafColor,p.x-1,p.y-1,p.x+2,p.y+2);
801 @ /* Branch rail to CheckIn's node */
802 @ if( p.u>0 ) drawRail(p.x, rowinfo[p.u-1].y+6, p.y-6, rowinfo[p.u-1].bg);
803 if( !omitDescenders ){
804 @ /* Branch rails from bottom or to top of page */
805 @ if( p.u==0 ) drawRail(p.x, 0, p.y-5,p.bg);
806 @ if( p.d ) drawRail(p.x, p.y+6, btm,p.bg);
807 }
808 @ /* MergeOut horizontal rail */
809 @ if( p.mo>0 ){
810 @ var x1 = p.mo + left - 1;
811 @ var y1 = p.y-3;
812 @ var x0 = x1>p.x ? p.x+6 : p.x-6;
813 @ var u = rowinfo[p.mu-1];
814 @ var y0 = u.y+5;
815 @ if( x1>=p.x-5 && x1<=p.x+5 ){
816 @ y1 = p.y-5;
817 @ }else{
@@ -839,13 +824,15 @@
824 @ for(var i=0; i<n; i+=2){
825 @ var x1 = p.au[i]*railPitch + left;
826 @ var x0 = x1>p.x ? p.x+7 : p.x-6;
827 @ var u = rowinfo[p.au[i+1]-1];
828 @ if(u.id<p.id){
829 @ /* Branch rail */
830 @ drawBox(u.bg,x0,p.y,x1+1,p.y+1);
831 @ drawRail(x1, u.y+6, p.y, u.bg);
832 @ }else{
833 @ /* Timewarp rail */
834 @ drawBox("#600000",x0,p.y,x1,p.y+1);
835 @ drawBox("#600000",x1-1,p.y,x1,u.y+1);
836 @ drawBox("#600000",x1,u.y,u.x-10,u.y+1);
837 @ var n = document.createElement("div"),
838 @ t = u.y-2,
@@ -864,10 +851,11 @@
851 @ n.style.borderLeftWidth = "7px";
852 @ n.style.borderLeftColor = "#600000";
853 @ cDiv.appendChild(n);
854 @ }
855 @ }
856 @ /* MergeIn rails & arrows */
857 @ for(var j in p.mi){
858 @ var y0 = p.y+5;
859 @ var mx = p.mi[j];
860 @ if( mx<0 ){
861 @ mx = left-mx;
@@ -926,12 +914,12 @@
914 @ }
915 @ }
916 @ }
917 @ function clickOnRow(p){
918 @ if( selRow==null ){
919 @ selBox = drawBox("orange",p.x-2,p.y-2,p.x+3,p.y+3);
920 @ selBox.style.borderRadius="6px";
921 @ selRow = p;
922 @ }else if( selRow==p ){
923 @ var canvasDiv = gebi("canvas");
924 @ canvasDiv.removeChild(selBox);
925 @ selBox = null;
926

Keyboard Shortcuts

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