Arrows colored by branch and skip of arrow heads
This commit is contained in:
parent
1f175d2d84
commit
7e041dd921
|
@ -99,7 +99,7 @@ const drawText = (txt) => {
|
|||
}
|
||||
|
||||
|
||||
const drawCommits = (svg, commits) => {
|
||||
const drawCommits = (svg, commits, modifyGraph) => {
|
||||
const gBullets = svg.append('g').attr('class', 'commit-bullets');
|
||||
const gLabels = svg.append('g').attr('class', 'commit-labels');
|
||||
let pos = 0;
|
||||
|
@ -110,20 +110,26 @@ const drawCommits = (svg, commits) => {
|
|||
|
||||
// log.debug('drawCommits (commit branchPos)', commit, branchPos);
|
||||
const y = branchPos[commit.branch].pos;
|
||||
const line = gBullets.append('circle');
|
||||
line.attr('cx', pos + 10);
|
||||
line.attr('cy', y);
|
||||
line.attr('r', 10);
|
||||
line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
|
||||
|
||||
// Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
|
||||
if (modifyGraph) {
|
||||
const line = gBullets.append('circle');
|
||||
line.attr('cx', pos + 10);
|
||||
line.attr('cy', y);
|
||||
line.attr('r', 10);
|
||||
line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
|
||||
}
|
||||
commitPos[commit.id] = {x: pos + 10, y: y};
|
||||
|
||||
const text = gLabels.append('text')
|
||||
// .attr('x', pos + 10)
|
||||
.attr('y', y + 25)
|
||||
.attr('class', 'commit-label')
|
||||
.text(commit.id);
|
||||
let bbox = text.node().getBBox();
|
||||
text.attr('x', pos + 10 - bbox.width / 2);
|
||||
if (modifyGraph) {
|
||||
const text = gLabels.append('text')
|
||||
// .attr('x', pos + 10)
|
||||
.attr('y', y + 25)
|
||||
.attr('class', 'commit-label')
|
||||
.text(commit.id);
|
||||
let bbox = text.node().getBBox();
|
||||
text.attr('x', pos + 10 - bbox.width / 2);
|
||||
}
|
||||
pos +=50;
|
||||
if(pos>maxPos) {
|
||||
maxPos = pos;
|
||||
|
@ -153,20 +159,34 @@ const drawArrow = (svg, commit1, commit2) => {
|
|||
let arc = '';
|
||||
let radius = 0;
|
||||
let offset = 0
|
||||
let colorClassNum;
|
||||
let lineDef;
|
||||
if(p1.y < p2.y) {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
if(p1.y > p2.y) {
|
||||
arc = 'A 20 20, 0, 0, 1,';
|
||||
radius = -20;
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x-radius} ${p1.y} ${arc} ${p2.x} ${p1.y-offset} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
|
||||
const arrow = svg.append('path').attr('d', `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`)
|
||||
.attr('class', 'arrow')
|
||||
.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||
if(p1.y === p2.y) {
|
||||
colorClassNum = branchPos[commit1.branch].index
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
|
||||
const arrow = svg.append('path').attr('d', lineDef)
|
||||
.attr('class', 'arrow arrow' + colorClassNum)
|
||||
// .attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||
}
|
||||
|
||||
const drawArrows = (svg, commits) => {
|
||||
|
@ -278,14 +298,13 @@ export const draw = function (txt, id, ver) {
|
|||
.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);
|
||||
drawCommits(diagram, allCommitsDict, false);
|
||||
drawBranches(diagram, branches);
|
||||
drawArrows(diagram, allCommitsDict);
|
||||
drawCommits(diagram, allCommitsDict, true);
|
||||
|
||||
const padding = config.diagramPadding;
|
||||
const svgBounds = diagram.node().getBBox();
|
||||
|
|
|
@ -9,7 +9,9 @@ const getStyles = (options) =>
|
|||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
.branch {
|
||||
stroke-width: 10;
|
||||
stroke-width: 1;
|
||||
stroke: black;
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
.commit-labels { font-size: 10px; }
|
||||
.commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; }
|
||||
|
@ -20,14 +22,14 @@ const getStyles = (options) =>
|
|||
.commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; }
|
||||
.commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; }
|
||||
.commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; }
|
||||
.branch0 { stroke: ${options.fillType0}; }
|
||||
.branch1 { stroke: ${options.fillType1}; }
|
||||
.branch2 { stroke: ${options.fillType2}; }
|
||||
.branch3 { stroke: ${options.fillType3}; }
|
||||
.branch4 { stroke: ${options.fillType4}; }
|
||||
.branch5 { stroke: ${options.fillType5}; }
|
||||
.branch6 { stroke: ${options.fillType6}; }
|
||||
.branch7 { stroke: ${options.fillType7}; }
|
||||
// .branch0 { stroke: ${options.fillType0}; }
|
||||
// .branch1 { stroke: ${options.fillType1}; }
|
||||
// .branch2 { stroke: ${options.fillType2}; }
|
||||
// .branch3 { stroke: ${options.fillType3}; }
|
||||
// .branch4 { stroke: ${options.fillType4}; }
|
||||
// .branch5 { stroke: ${options.fillType5}; }
|
||||
// .branch6 { stroke: ${options.fillType6}; }
|
||||
// .branch7 { stroke: ${options.fillType7}; }
|
||||
.label0 { fill: ${options.fillType0}; }
|
||||
.label1 { fill: ${options.fillType1}; }
|
||||
.label2 { fill: ${options.fillType2}; }
|
||||
|
@ -38,8 +40,15 @@ const getStyles = (options) =>
|
|||
.label7 { fill: ${options.fillType7}; }
|
||||
|
||||
// .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
|
||||
.arrow { stroke : #cc33cc; stroke-width: 8; stroke-linecap: round; fill: none}
|
||||
// #arrowhead { fill: ${options.tertiaryColor};}
|
||||
.arrow { stroke-width: 8; stroke-linecap: round; fill: none}
|
||||
.arrow0 { stroke: ${options.fillType0}; }
|
||||
.arrow1 { stroke: ${options.fillType1}; }
|
||||
.arrow2 { stroke: ${options.fillType2}; }
|
||||
.arrow3 { stroke: ${options.fillType3}; }
|
||||
.arrow4 { stroke: ${options.fillType4}; }
|
||||
.arrow5 { stroke: ${options.fillType5}; }
|
||||
.arrow6 { stroke: ${options.fillType6}; }
|
||||
.arrow7 { stroke: ${options.fillType7}; }
|
||||
#arrowhead { fill: #990099;}
|
||||
.branchLabel { }
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue