GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

positioned tags, tilted commit labels and fixed some bugs

Browse Source
This commit is contained in:
Sibin Thomas 2023-07-19 20:22:29 +05:30
parent 863d1bfd4d
commit d81e4fabd5
1 changed files with 65 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/mermaid/src/diagrams/git/gitGraphRenderer.js
View File

@ -254,22 +254,35 @@ const drawCommits = (svg, commits, modifyGraph) => {
if (dir === 'TB') { if (dir === 'TB') {
labelBkg labelBkg
.attr('x', x - (bbox.width + 4 * px + 5))
.attr('y', y - 12);
text
.attr('x', x - (bbox.width + 4 * px)) .attr('x', x - (bbox.width + 4 * px))
.attr('y', y - 5); .attr('y', y + bbox.height - 12);
text.attr('x', x - (bbox.width + 4 * px));
text.attr('y', y + bbox.height - 5);
} }
if (dir !== 'TB') { if (dir !== 'TB') {
text.attr('x', pos + 10 - bbox.width / 2); text.attr('x', pos + 10 - bbox.width / 2);
} }
if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') { if (gitGraphConfig.rotateCommitLabel) {
let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; if (dir === 'TB')
let r_y = 10 + (bbox.width / 25) * 8.5; {
wrapper.attr( text.attr(
'transform', 'transform',
'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')' 'rotate(' + -45 + ', ' + x + ', ' + y + ')'
); );
labelBkg.attr(
'transform',
'rotate(' + -45 + ', ' + x + ', ' + y + ')'
);
} else {
let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
let r_y = 10 + (bbox.width / 25) * 8.5;
wrapper.attr(
'transform',
'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
);
}
} }
} }
if (commit.tag) { if (commit.tag) {
@ -302,6 +315,31 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('cy', ly) .attr('cy', ly)
.attr('r', 1.5) .attr('r', 1.5)
.attr('class', 'tag-hole'); .attr('class', 'tag-hole');
if (dir === 'TB')
{
rect
.attr('class', 'tag-label-bkg')
.attr(
'points',
`
${x},${pos + py}
${x},${pos - py}
${x + 10},${pos - h2 - py}
${x + 10 + tagBbox.width + px},${pos - h2 - py}
${x + 10 + tagBbox.width + px},${pos + h2 + py}
${x + 10},${pos + h2 + py}`
)
.attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
hole
.attr('cx', x + px/2)
.attr('cy', pos)
.attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
tag
.attr('x', x+5)
.attr('y', pos+3)
.attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')');
}
} }
} }
pos += 50; pos += 50;
@ -428,19 +466,20 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
} }
if (p1.x > p2.x) { if (p1.x > p2.x) {
arc = 'A 20 20, 0, 0, 0,'; arc = 'A 20 20, 0, 0, 0,';
arc2 = 'A 20 20, 0, 0, 1,';
radius = 20; radius = 20;
offset = 20; offset = 20;
// Arrows going up take the color from the source branch // Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commit1.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
} }
if (p1.x === p2.x) { if (p1.x === p2.x) {
colorClassNum = branchPos[commit1.branch].index; colorClassNum = branchPos[commit1.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
} }
@ -588,15 +627,25 @@ export const draw = function (txt, id, ver, diagObj) {
allCommitsDict = diagObj.db.getCommits(); allCommitsDict = diagObj.db.getCommits();
const branches = diagObj.db.getBranchesAsObjArray(); const branches = diagObj.db.getBranchesAsObjArray();
dir = diagObj.db.getDirection(); dir = diagObj.db.getDirection();
const diagram = select(`[id="${id}"]`);
// Position branches vertically // Position branches
let pos = 0; let pos = 0;
branches.forEach((branch, index) => { branches.forEach((branch, index) => {
const labelElement = drawText(branch.name);
const g = diagram.append('g');
const branchLabel = g.insert('g').attr('class', 'branchLabel');
const label = branchLabel.insert('g').attr('class', 'label branch-label');
label.node().appendChild(labelElement);
let bbox = labelElement.getBBox();
branchPos[branch.name] = { pos, index }; branchPos[branch.name] = { pos, index };
pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0); pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0);
label.remove();
branchLabel.remove();
g.remove();
}); });
const diagram = select(`[id="${id}"]`);
drawCommits(diagram, allCommitsDict, false); drawCommits(diagram, allCommitsDict, false);
if (gitGraphConfig.showBranches) { if (gitGraphConfig.showBranches) {