marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3150 from faisalarbain/bug/3149_gitgraph_more_than_8_branches

Browse Source 
fix: rotate class id when branch more than 8
This commit is contained in:
Knut Sveidqvist
2022-08-04 12:29:01 +02:00
committed by GitHub
parent f7c5e1b8b2 9ee43c0b7a
commit 3054a809ce
2 changed files with 71 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -207,4 +207,50 @@ describe('Git Graph diagram', () => {
{}
);
});
it('12: should render commits for more than 8 branches', () => {
imgSnapshotTest(
`
gitGraph
checkout main
commit
checkout main
branch branch1
commit
checkout main
merge branch1
branch branch2
commit
checkout main
merge branch2
branch branch3
commit
checkout main
merge branch3
branch branch4
commit
checkout main
merge branch4
branch branch5
commit
checkout main
merge branch5
branch branch6
commit
checkout main
merge branch6
branch branch7
commit
checkout main
merge branch7
branch branch8
commit
checkout main
merge branch8
branch branch9
commit
`,
{}
);
});
});

49
src/diagrams/git/gitGraphRenderer.js
View File

@@ -15,6 +15,8 @@ const commitType = {
CHERRY_PICK: 4,
};
const THEME_COLOR_LIMIT = 8;
let branchPos = {};
let commitPos = {};
let lanes = [];
@@ -117,13 +119,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
circle.attr('width', 20);
circle.attr(
'class',
'commit ' +
commit.id +
' commit-highlight' +
branchPos[commit.branch].index +
' ' +
typeClass +
'-outer'
`commit ${commit.id} commit-highlight${
branchPos[commit.branch].index % THEME_COLOR_LIMIT
} ${typeClass}-outer`
);
gBullets
.append('rect')
@@ -133,13 +131,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('width', 12)
.attr(
'class',
'commit ' +
commit.id +
' commit' +
branchPos[commit.branch].index +
' ' +
typeClass +
'-inner'
`commit ${commit.id} commit${
branchPos[commit.branch].index % THEME_COLOR_LIMIT
} ${typeClass}-inner`
);
} else if (commit.type === commitType.CHERRY_PICK) {
gBullets
@@ -147,21 +141,21 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('cx', x)
.attr('cy', y)
.attr('r', 10)
.attr('class', 'commit ' + commit.id + ' ' + typeClass);
.attr('class', `commit ${commit.id} ${typeClass}`);
gBullets
.append('circle')
.attr('cx', x - 3)
.attr('cy', y + 2)
.attr('r', 2.75)
.attr('fill', '#fff')
.attr('class', 'commit ' + commit.id + ' ' + typeClass);
.attr('class', `commit ${commit.id} ${typeClass}`);
gBullets
.append('circle')
.attr('cx', x + 3)
.attr('cy', y + 2)
.attr('r', 2.75)
.attr('fill', '#fff')
.attr('class', 'commit ' + commit.id + ' ' + typeClass);
.attr('class', `commit ${commit.id} ${typeClass}`);
gBullets
.append('line')
.attr('x1', x + 3)
@@ -169,7 +163,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('x2', x)
.attr('y2', y - 5)
.attr('stroke', '#fff')
.attr('class', 'commit ' + commit.id + ' ' + typeClass);
.attr('class', `commit ${commit.id} ${typeClass}`);
gBullets
.append('line')
.attr('x1', x - 3)
@@ -177,13 +171,16 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('x2', x)
.attr('y2', y - 5)
.attr('stroke', '#fff')
.attr('class', 'commit ' + commit.id + ' ' + typeClass);
.attr('class', `commit ${commit.id} ${typeClass}`);
} else {
const circle = gBullets.append('circle');
circle.attr('cx', x);
circle.attr('cy', y);
circle.attr('r', commit.type === commitType.MERGE ? 9 : 10);
circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index);
circle.attr(
'class',
`commit ${commit.id} commit${branchPos[commit.branch].index % THEME_COLOR_LIMIT}`
);
if (commit.type === commitType.MERGE) {
const circle2 = gBullets.append('circle');
circle2.attr('cx', x);
@@ -191,7 +188,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
circle2.attr('r', 6);
circle2.attr(
'class',
'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index
`commit ${typeClass} ${commit.id} commit${
branchPos[commit.branch].index % THEME_COLOR_LIMIT
}`
);
}
if (commit.type === commitType.REVERSE) {
@@ -200,7 +199,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`)
.attr(
'class',
'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index
`commit ${typeClass} ${commit.id} commit${
branchPos[commit.branch].index % THEME_COLOR_LIMIT
}`
);
}
}
@@ -430,7 +431,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
const arrow = svg
.append('path')
.attr('d', lineDef)
.attr('class', 'arrow arrow' + colorClassNum);
.attr('class', 'arrow arrow' + (colorClassNum % THEME_COLOR_LIMIT));
};
const drawArrows = (svg, commits) => {
@@ -460,7 +461,7 @@ const drawBranches = (svg, branches) => {
const gitGraphConfig = getConfig().gitGraph;
const g = svg.append('g');
branches.forEach((branch, index) => {
let adjustIndexForTheme = index >= 8 ? index - 8 : index;
const adjustIndexForTheme = index % THEME_COLOR_LIMIT;
const pos = branchPos[branch.name].pos;
const line = g.append('line');