marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

#3080 Adding rotated commit label functionality

Browse Source
This commit is contained in:
ashishj
2022-06-07 18:45:07 +02:00
parent aeb6e860bb
commit 1851e81794
3 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -176,9 +176,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
const py = 2;
// Draw the commit label
if (commit.type !== commitType.MERGE && gitGraphConfig.showCommitLabel) {
const labelBkg = gLabels.insert('rect').attr('class', 'commit-label-bkg');
const wrapper = gLabels.append('g');
const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
const text = gLabels
const text = wrapper
.append('text')
.attr('x', pos)
.attr('y', y + 25)
@@ -193,6 +194,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('width', bbox.width + 2 * py)
.attr('height', bbox.height + 2 * py);
text.attr('x', pos + 10 - bbox.width / 2);
if (gitGraphConfig.rotateCommitLabel) {
let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
let r_y = 10 + (bbox.width / 25) * 8.5;
//wrapper.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + bbox.width / 2 + ') ');
wrapper.attr(
'transform',
'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
);
}
}
if (commit.tag) {
const rect = gLabels.insert('polygon');
@@ -436,14 +446,18 @@ const drawBranches = (svg, branches) => {
.attr('class', 'branchLabelBkg label' + adjustIndexForTheme)
.attr('rx', 4)
.attr('ry', 4)
.attr('x', -bbox.width - 4)
.attr('x', -bbox.width - 4 - (gitGraphConfig.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) + ', ' + (pos - bbox.height / 2 - 1) + ')'
'translate(' +
(-bbox.width - 14 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0)) +
', ' +
(pos - bbox.height / 2 - 1) +
')'
);
bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
});
@@ -479,7 +493,7 @@ export const draw = function (txt, id, ver) {
let pos = 0;
branches.forEach((branch, index) => {
branchPos[branch.name] = { pos, index };
pos += 50;
pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0);
});
const diagram = select(`[id="${id}"]`);
@@ -500,7 +514,11 @@ export const draw = function (txt, id, ver) {
const height = svgBounds.height + padding * 2;
configureSvgSize(diagram, height, width, conf.useMaxWidth);
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
const vBox = `${
svgBounds.x -
padding -
(gitGraphConfig.showBranches && gitGraphConfig.rotateCommitLabel === true ? 30 : 0)
} ${svgBounds.y - padding} ${width} ${height}`;
diagram.attr('viewBox', vBox);
};