feature: adding arrows to the git graph

src/diagrams/git/gitGraphRenderer.js

@@ -108,7 +108,7 @@ const drawCommits = (svg, commits) => {
   keys.forEach((key, index) => {
     const commit = commits[key];
 
-    log.debug('drawCommits (commitm branchPos)', commit, branchPos);
+    // log.debug('drawCommits (commit branchPos)', commit, branchPos);
     const y = branchPos[commit.branch].pos;
     const line = gBullets.append('circle');
     line.attr('cx', pos + 10);
@@ -131,6 +131,60 @@ const drawCommits = (svg, commits) => {
   });
 }
 
+const drawArrow = (svg, commit1, commit2) => {
+  const conf = getConfig();
+  // const config = getConfig().gitGraph;
+  // const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+  // line.setAttribute('x1', commitPos[commit1.id].x);
+  // line.setAttribute('y1', commitPos[commit1.id].y);
+  // line.setAttribute('x2', commitPos[commit2.id].x);
+  // line.setAttribute('y2', commitPos[commit2.id].y);
+  // line.setAttribute('class', 'commit-line');
+  // line.setAttribute('stroke-width', config.arrow.strokeWidth);
+  // line.setAttribute('stroke', config.arrow.stroke);
+  // line.setAttribute('marker-end', 'url(#arrowhead)');
+  // return line;
+
+  const p1 = commitPos[commit1.id];
+  const p2 = commitPos[commit2.id];
+  log.debug('drawArrow', p1, p2);
+
+  let url = '';
+  if (conf.arrowMarkerAbsolute) {
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(');
+    url = url.replace(/\)/g, '\\)');
+  }
+
+  const arrow = svg.append('line').attr('x1', p1.x)
+      .attr('y1', p1.y)
+      .attr('x2', p2.x)
+      .attr('y2', p2.y)
+      .attr('class', 'arrow')
+      .attr('marker-end', 'url(' + url + '#arrowhead)');
+}
+
+const drawArrows = (svg, commits) => {
+  const gArrows = svg.append('g').attr('class', 'commit-arrows');
+  let pos = 0;
+
+  const k = Object.keys(commits);
+  console.log('drawArrows', k);
+  k.forEach((key, index) => {
+    const commit = commits[key];
+    if(commit.parents && commit.parents.length>0) {
+      commit.parents.forEach((parent) => {
+        drawArrow(gArrows, commits[parent], commit);
+      });
+    }
+  });
+}
+
 /**
  * @param svg
  * @param commitid
@@ -213,8 +267,24 @@ export const draw = function (txt, id, ver) {
   const diagram = select(`[id="${id}"]`);
   svgCreateDefs(diagram);
 
+    diagram
+    .append('defs')
+    .append('marker')
+    .attr('id', 'arrowhead')
+    .attr('refX',24)
+    .attr('refY', 10)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 24)
+    .attr('markerHeight', 24)
+    .attr('orient', 'auto')
+    // .attr('stroke', 'red')
+    // .attr('fill', 'red')
+    .append('path')
+    .attr('d', 'M 0 0 L 20 10 L 0 20 z'); // this is actual shape for arrowhead
+
   drawCommits(diagram, allCommitsDict);
   drawBranches(diagram, branches);
+  drawArrows(diagram, allCommitsDict);
 
   const padding = config.diagramPadding;
   const svgBounds = diagram.node().getBBox();

src/diagrams/git/mockDb.js

@@ -6,7 +6,7 @@ export const getCommits = () => {
       seq: 1,
       message: '',
       branch: 'master',
-      parent: null,
+      parents: null,
       tag: 'v0.1',
       commitType: 'normal',
       note: null,
@@ -16,7 +16,7 @@ export const getCommits = () => {
       seq: 2,
       message: '',
       branch: 'develop',
-      parent: '0000001',
+      parents: ['0000001'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -26,7 +26,7 @@ export const getCommits = () => {
       seq: 3,
       message: '',
       branch: 'featureB',
-      parent: '0000002',
+      parents: ['0000002'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -36,7 +36,7 @@ export const getCommits = () => {
       seq: 4,
       message: '',
       branch: 'hotfix',
-      parent: '0000001',
+      parents: ['0000001'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -46,7 +46,7 @@ export const getCommits = () => {
       seq: 5,
       message: '',
       branch: 'develop',
-      parent: '0000002',
+      parents: ['0000002'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -56,7 +56,7 @@ export const getCommits = () => {
       seq: 6,
       message: '',
       branch: 'featureB',
-      parent: '0000003',
+      parents: ['0000003'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -66,7 +66,7 @@ export const getCommits = () => {
       seq: 7,
       message: '',
       branch: 'master',
-      parent: '0000004',
+      parents: ['0000004'],
       tag: 'v0.2',
       commitType: 'normal',
       note: null,
@@ -76,7 +76,7 @@ export const getCommits = () => {
       seq: 8,
       message: '',
       branch: 'featureB',
-      parent: '0000006',
+      parents: ['0000006'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -86,7 +86,7 @@ export const getCommits = () => {
       seq: 9,
       message: '',
       branch: 'featureA',
-      parent: '0000005',
+      parents: ['0000005'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -96,7 +96,7 @@ export const getCommits = () => {
       seq: 10,
       message: '',
       branch: 'develop',
-      parent: ['0000004', '0000005'],
+      parents: ['0000004', '0000005'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -106,7 +106,7 @@ export const getCommits = () => {
       seq: 11,
       message: '',
       branch: 'featureA',
-      parent: '0000009',
+      parents: ['0000009'],
       tag: null,
       commitType: 'normal',
       note: '',
@@ -116,7 +116,7 @@ export const getCommits = () => {
       seq: 12,
       message: '',
       branch: 'featureB',
-      parent: '0000008',
+      parents: ['0000008'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -126,7 +126,7 @@ export const getCommits = () => {
       seq: 13,
       message: '',
       branch: 'develop',
-      parent: ['0000010', '0000011'],
+      parents: ['0000010', '0000011'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -136,7 +136,7 @@ export const getCommits = () => {
       seq: 14,
       message: '',
       branch: 'release',
-      parent: '0000013',
+      parents: ['0000013'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -146,7 +146,7 @@ export const getCommits = () => {
       seq: 15,
       message: '',
       branch: 'master',
-      parent: '0000007',
+      parents: ['0000007'],
       tag: null,
       commitType: 'normal',
       note: null,
@@ -156,7 +156,7 @@ export const getCommits = () => {
       seq: 16,
       message: '',
       branch: 'release',
-      parent: ['0000014', '0000015'],
+      parents: ['0000014', '0000015'],
       tag: 'v1.0',
       commitType: 'normal',
       note: null,
@@ -166,7 +166,7 @@ export const getCommits = () => {
       seq: 17,
       message: '',
       branch: 'develop',
-      parent: ['0000013', '0000016'],
+      parents: ['0000013', '0000016'],
       tag: null,
       commitType: 'normal',
       note: null,

src/diagrams/git/styles.js

@@ -1,4 +1,4 @@
-const getStyles = options =>
+const getStyles = (options) =>
   `
   .commit-id,
   .commit-msg,
@@ -36,6 +36,11 @@ const getStyles = options =>
   .label5  { fill: ${options.fillType5}; }
   .label6  { fill: ${options.fillType6}; }
   .label7  { fill: ${options.fillType7}; }
+
+  // .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
+  .arrow { stroke : #cc33cc; stroke-width: 8; stroke-linecap: round; }
+  // #arrowhead { fill: ${options.tertiaryColor};}
+  #arrowhead { fill: #990099;}
   .branchLabel  { }
   }
 `;