[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-diffusion-commit-graph
   3   * @requires javelin-behavior
   4   *           javelin-dom
   5   *           javelin-stratcom
   6   */
   7  
   8  JX.behavior('diffusion-commit-graph', function(config) {
   9  
  10    var nodes = JX.DOM.scry(document.body, 'div', 'commit-graph');
  11    var cxt;
  12  
  13    // Pick the color for column 'c'.
  14    function color(c) {
  15      var colors = [
  16        '#cc0000',
  17        '#cc0099',
  18        '#6600cc',
  19        '#0033cc',
  20        '#00cccc',
  21        '#00cc33',
  22        '#66cc00',
  23        '#cc9900'
  24      ];
  25      return colors[c % colors.length];
  26    }
  27  
  28    // Stroke a line (for lines between commits).
  29    function lstroke(c) {
  30      cxt.lineWidth = 3;
  31      cxt.strokeStyle = '#ffffff';
  32      cxt.stroke();
  33      cxt.lineWidth = 1;
  34      cxt.strokeStyle = color(c);
  35      cxt.stroke();
  36    }
  37  
  38    // Stroke with fill (for commit circles).
  39    function fstroke(c) {
  40      cxt.fillStyle = color(c);
  41      cxt.strokeStyle = '#ffffff';
  42      cxt.fill();
  43      cxt.stroke();
  44    }
  45  
  46  
  47    for (var ii = 0; ii < nodes.length; ii++) {
  48      var data = JX.Stratcom.getData(nodes[ii]);
  49  
  50      var cell = 12; // Width of each thread.
  51      var xpos = function(col) {
  52        return (col * cell) + (cell / 2);
  53      };
  54  
  55      var h = 26;
  56      var w = cell * config.count;
  57  
  58      var canvas = JX.$N('canvas', {width: w, height: h});
  59      cxt = canvas.getContext('2d');
  60  
  61      cxt.lineWidth = 3;
  62      // This gives us sharper lines, since lines drawn on an integer (like 5)
  63      // are drawn from 4.5 to 5.5.
  64      cxt.translate(0.5, 0.5);
  65  
  66      cxt.strokeStyle = '#ffffff';
  67      cxt.fillStyle = '#ffffff';
  68  
  69      // First, figure out which column this commit appears in. It is marked by
  70      // "o" (if it has a commit after it) or "^" (if no other commit has it as
  71      // a parent). We use this to figure out where to draw the join/split lines.
  72  
  73      var origin = null;
  74      var jj;
  75      var x;
  76      var c;
  77      for (jj = 0; jj < data.line.length; jj++) {
  78        c = data.line.charAt(jj);
  79        switch (c) {
  80          case 'o':
  81          case '^':
  82            origin = xpos(jj);
  83            break;
  84        }
  85      }
  86  
  87      // Draw all the join lines. These start at some column at the top of the
  88      // canvas and join the commit's column. They indicate branching.
  89  
  90      for (jj = 0; jj < data.join.length; jj++) {
  91        var join = data.join[jj];
  92        x = xpos(join);
  93        cxt.beginPath();
  94          cxt.moveTo(x, 0);
  95          cxt.bezierCurveTo(x, h/4, origin, h/4, origin, h/2);
  96        lstroke(join);
  97      }
  98  
  99      // Draw all the split lines. These start at the commit and end at some
 100      // column on the bottom of the canvas. They indicate merging.
 101  
 102      for (jj = 0; jj < data.split.length; jj++) {
 103        var split = data.split[jj];
 104        x = xpos(split);
 105        cxt.beginPath();
 106          cxt.moveTo(origin, h/2);
 107          cxt.bezierCurveTo(origin, 3*h/4, x, 3*h/4, x, h);
 108        lstroke(split);
 109      }
 110  
 111      // Draw the vertical lines (a branch with no activity at this commit) and
 112      // the commit circles.
 113  
 114      for (jj = 0; jj < data.line.length; jj++) {
 115        c = data.line.charAt(jj);
 116        switch (c) {
 117          case 'o':
 118          case '^':
 119          case '|':
 120            if (c == 'o' || c == '^') {
 121              origin = xpos(jj);
 122            }
 123  
 124            cxt.beginPath();
 125            cxt.moveTo(xpos(jj), (c == '^' ? h/2 : 0));
 126            cxt.lineTo(xpos(jj), h);
 127            lstroke(jj);
 128  
 129            if (c == 'o' || c == '^') {
 130              cxt.beginPath();
 131              cxt.arc(xpos(jj), h/2, 3, 0, 2 * Math.PI, true);
 132              fstroke(jj);
 133            }
 134            break;
 135        }
 136      }
 137  
 138      JX.DOM.setContent(nodes[ii], canvas);
 139    }
 140  
 141  
 142  });