Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: rotate class id when branch more than 8 #3150

Merged
merged 4 commits into from Aug 4, 2022
Merged

fix: rotate class id when branch more than 8 #3150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81ff441
rotate class id when branch more than 8
faisalarbain Jun 18, 2022
91e369a
rename const name
faisalarbain Jun 19, 2022
8465313
PR comments
faisalarbain Jun 23, 2022
9ee43c0
snapshot test for more 8 branches with commits
faisalarbain Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 46 additions & 0 deletions cypress/integration/rendering/gitGraph.spec.js
View file
Open in desktop
Expand Up @@ -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 changes: 25 additions & 24 deletions src/diagrams/git/gitGraphRenderer.js
View file
Open in desktop
Expand Up @@ -15,6 +15,8 @@ const commitType = {
CHERRY_PICK: 4,
};

const THEME_COLOR_LIMIT = 8;

let branchPos = {};
let commitPos = {};
let lanes = [];
Expand Down Expand Up @@ -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')
Expand All @@ -133,65 +131,66 @@ 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
.append('circle')
.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)
.attr('y1', y + 1)
.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)
.attr('y1', y + 1)
.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);
circle2.attr('cy', y);
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) {
Expand All @@ -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
}`
);
}
}
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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');
Expand Down