diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index fdcadaee1..545a6125b 100644 --- a/src/diagrams/git/gitGraphRenderer.js +++ b/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(); diff --git a/src/diagrams/git/mockDb.js b/src/diagrams/git/mockDb.js index 0da3c10d1..9ebaf23d3 100644 --- a/src/diagrams/git/mockDb.js +++ b/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, diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js index 6e0935970..547d10341 100644 --- a/src/diagrams/git/styles.js +++ b/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 { } } `;