Skip to content

fix(gitGraph): honor showBranches config to hide branch lines and labels (#6535) #6554

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

fix(gitGraph): honor showBranches config to hide branch lines and labels (#6535) #6554

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0010a8
fix(gitGraph): honor showBranches config to hide branch lines and lab…
Apr 30, 2025
04248c9
Trigger Netlify rebuild
Apr 30, 2025
ebbfc37
Fix: Update GitGraph Rendering Logic
May 1, 2025
2c5b372
change config
May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 44 additions & 35 deletions packages/mermaid/src/diagrams/git/gitGraphRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface CommitPositionOffset extends CommitPosition {
}

const DEFAULT_CONFIG = getConfig();
const DEFAULT_GITGRAPH_CONFIG = DEFAULT_CONFIG?.gitGraph;
const config = DEFAULT_CONFIG?.gitGraph;
const LAYOUT_OFFSET = 10;
const COMMIT_STEP = 40;
const PX = 4;
Expand Down Expand Up @@ -292,7 +292,7 @@ const drawCommitLabel = (
if (
commit.type !== commitType.CHERRY_PICK &&
((commit.customId && commit.type === commitType.MERGE) || commit.type !== commitType.MERGE) &&
DEFAULT_GITGRAPH_CONFIG?.showCommitLabel
config?.showCommitLabel
) {
const wrapper = gLabels.append('g');
const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
Expand Down Expand Up @@ -322,7 +322,7 @@ const drawCommitLabel = (
text.attr('x', commitPosition.posWithOffset - bbox.width / 2);
}

if (DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel) {
if (config.rotateCommitLabel) {
if (dir === 'TB' || dir === 'BT') {
text.attr(
'transform',
Expand Down Expand Up @@ -516,14 +516,14 @@ const drawCommits = (
commits: Map<string, Commit>,
modifyGraph: boolean
) => {
if (!DEFAULT_GITGRAPH_CONFIG) {
if (!config) {
throw new Error('GitGraph config not found');
}
const gBullets = svg.append('g').attr('class', 'commit-bullets');
const gLabels = svg.append('g').attr('class', 'commit-labels');
let pos = dir === 'TB' || dir === 'BT' ? defaultPos : 0;
const keys = [...commits.keys()];
const isParallelCommits = DEFAULT_GITGRAPH_CONFIG?.parallelCommits ?? false;
const isParallelCommits = config?.parallelCommits ?? false;

const sortKeys = (a: string, b: string) => {
const seqA = commits.get(a)?.seq;
Expand Down Expand Up @@ -812,9 +812,11 @@ const drawArrows = (

const drawBranches = (
svg: d3.Selection<d3.BaseType, unknown, HTMLElement, any>,
branches: { name: string }[]
branches: { name: string }[],
config: any
) => {
const g = svg.append('g');

branches.forEach((branch, index) => {
const adjustIndexForTheme = index % THEME_COLOR_LIMIT;

Expand Down Expand Up @@ -859,14 +861,14 @@ const drawBranches = (
.attr('class', 'branchLabelBkg label' + adjustIndexForTheme)
.attr('rx', 4)
.attr('ry', 4)
.attr('x', -bbox.width - 4 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0))
.attr('x', -bbox.width - 4 - (config?.rotateCommitLabel === true ? 30 : 0))
.attr('y', -bbox.height / 2 + 8)
.attr('width', bbox.width + 18)
.attr('height', bbox.height + 4);
label.attr(
'transform',
'translate(' +
(-bbox.width - 14 - (DEFAULT_GITGRAPH_CONFIG?.rotateCommitLabel === true ? 30 : 0)) +
(-bbox.width - 14 - (config?.rotateCommitLabel === true ? 30 : 0)) +
', ' +
(pos - bbox.height / 2 - 1) +
')'
Expand Down Expand Up @@ -899,10 +901,13 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
clear();

log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
if (!DEFAULT_GITGRAPH_CONFIG) {
const DEFAULT_CONFIG = getConfig();
const config = DEFAULT_CONFIG?.gitGraph;
if (!config) {
throw new Error('GitGraph config not found');
}
const rotateCommitLabel = DEFAULT_GITGRAPH_CONFIG.rotateCommitLabel ?? false;

const rotateCommitLabel = config.rotateCommitLabel ?? false;
const db = diagObj.db as GitGraphDBRenderProvider;
allCommitsDict = db.getCommits();
const branches = db.getBranchesAsObjArray();
Expand All @@ -911,40 +916,44 @@ export const draw: DrawDefinition = function (txt, id, ver, diagObj) {
let pos = 0;

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);
const bbox = labelElement.getBBox();
let bbox: DOMRect = {
x: 0,
y: 0,
width: 0,
height: 0,
top: 0,
right: 0,
bottom: 0,
left: 0,
toJSON: () => '',
};
Comment on lines 918 to +929
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not moved inside drawBranches?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I’ve moved the branch label creation inside the drawBranches function as intended. Could you please clarify your suggestion? Thanks in advance


if (config.showBranches !== false) {
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);
bbox = labelElement.getBBox();
label.remove();
branchLabel.remove();
g.remove();
}

pos = setBranchPosition(branch.name, pos, index, bbox, rotateCommitLabel);
label.remove();
branchLabel.remove();
g.remove();
});

drawCommits(diagram, allCommitsDict, false);
if (DEFAULT_GITGRAPH_CONFIG.showBranches) {
drawBranches(diagram, branches);
if (config.showBranches) {
drawBranches(diagram, branches, config);
}
drawArrows(diagram, allCommitsDict);
drawCommits(diagram, allCommitsDict, true);

utils.insertTitle(
diagram,
'gitTitleText',
DEFAULT_GITGRAPH_CONFIG.titleTopMargin ?? 0,
db.getDiagramTitle()
);
utils.insertTitle(diagram, 'gitTitleText', config.titleTopMargin ?? 0, db.getDiagramTitle());

// Setup the view box and size of the svg element
setupGraphViewbox(
undefined,
diagram,
DEFAULT_GITGRAPH_CONFIG.diagramPadding,
DEFAULT_GITGRAPH_CONFIG.useMaxWidth
);
setupGraphViewbox(undefined, diagram, config.diagramPadding, config.useMaxWidth);
};

export default {
Expand Down Expand Up @@ -1307,7 +1316,7 @@ if (import.meta.vitest) {
branchPos.set('main', { pos: 0, index: 0 });
branchPos.set('develop', { pos: 107.49609375, index: 1 });
branchPos.set('feature', { pos: 225.70703125, index: 2 });
DEFAULT_GITGRAPH_CONFIG!.parallelCommits = true;
config!.parallelCommits = true;
commits.forEach((commit, key) => {
if (commit.parents.length > 0) {
curPos = calculateCommitPosition(commit);
Expand Down Expand Up @@ -1335,7 +1344,7 @@ if (import.meta.vitest) {
});
});
});
DEFAULT_GITGRAPH_CONFIG!.parallelCommits = false;
config!.parallelCommits = false;
it('add', () => {
commitPos.set('parent1', { x: 1, y: 1 });
commitPos.set('parent2', { x: 2, y: 2 });
Expand Down
Loading