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

Added code for Vertical branches for GitGraph and Added TB option in the parser file.

Browse Source
This commit is contained in:
Sibin Thomas
2023-07-15 18:27:42 +05:30
parent 840609af63
commit 383bbefa9e
2 changed files with 133 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,12 +19,14 @@ let branchPos = {};
let commitPos = {}; let commitPos = {};
let lanes = []; let lanes = [];
let maxPos = 0; let maxPos = 0;
let dir = 'LR';
const clear = () => { const clear = () => {
branchPos = {}; branchPos = {};
commitPos = {}; commitPos = {};
allCommitsDict = {}; allCommitsDict = {};
maxPos = 0; maxPos = 0;
lanes = []; lanes = [];
dir = 'LR';
}; };
/** /**
@@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
const gLabels = svg.append('g').attr('class', 'commit-labels'); const gLabels = svg.append('g').attr('class', 'commit-labels');
let pos = 0; let pos = 0;
if (dir === 'TB') {
pos = 30;
}
const keys = Object.keys(commits); const keys = Object.keys(commits);
const sortedKeys = keys.sort((a, b) => { const sortedKeys = keys.sort((a, b) => {
return commits[a].seq - commits[b].seq; return commits[a].seq - commits[b].seq;
@@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
sortedKeys.forEach((key) => { sortedKeys.forEach((key) => {
const commit = commits[key]; const commit = commits[key];
const y = branchPos[commit.branch].pos; const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
const x = pos + 10; const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
// Don't draw the commits now but calculate the positioning which is used by the branch lines etc. // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
if (modifyGraph) { if (modifyGraph) {
let typeClass; let typeClass;
@@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
} }
} }
} }
commitPos[commit.id] = { x: pos + 10, y: y }; if (dir === 'TB') {
commitPos[commit.id] = { x: x, y: pos + 10 };
} else {
commitPos[commit.id] = { x: pos + 10, y: y };
}
// The first iteration over the commits are for positioning purposes, this // The first iteration over the commits are for positioning purposes, this
// is required for drawing the lines. The circles and labels is drawn after the labels // is required for drawing the lines. The circles and labels is drawn after the labels
@@ -240,8 +251,19 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('y', y + 13.5) .attr('y', y + 13.5)
.attr('width', bbox.width + 2 * py) .attr('width', bbox.width + 2 * py)
.attr('height', bbox.height + 2 * py); .attr('height', bbox.height + 2 * py);
text.attr('x', pos + 10 - bbox.width / 2);
if (gitGraphConfig.rotateCommitLabel) { if (dir === 'TB') {
labelBkg
.attr('x', x - (bbox.width + 4 * px))
.attr('y', y - 5);
text.attr('x', x - (bbox.width + 4 * px));
text.attr('y', y + bbox.height - 5);
}
if (dir !== 'TB') {
text.attr('x', pos + 10 - bbox.width / 2);
}
if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') {
let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5; let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
let r_y = 10 + (bbox.width / 25) * 8.5; let r_y = 10 + (bbox.width / 25) * 8.5;
wrapper.attr( wrapper.attr(
@@ -365,46 +387,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
colorClassNum = branchPos[commit2.branch].index; colorClassNum = branchPos[commit2.branch].index;
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y); const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
if (p1.y < p2.y) { if (dir === 'TB') {
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${ if (p1.x < p2.x) {
p2.x - radius lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${p1.y + offset} L ${
} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`; lineX
} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
} else {
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${
lineX
} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
}
} else { } else {
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${ if (p1.y < p2.y) {
p1.x + offset lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`; p2.x - radius
} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
} else {
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
p1.x + offset
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
}
} }
} else { } else {
if (p1.y < p2.y) { if (dir === 'TB')
arc = 'A 20 20, 0, 0, 0,'; {
radius = 20; if (p1.x < p2.x) {
offset = 20; arc = 'A 20 20, 0, 0, 0,';
arc2 = 'A 20 20, 0, 0, 1,';
radius = 20;
offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch // Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index; colorClassNum = branchPos[commit2.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 ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
} }
if (p1.y > p2.y) { if (p1.x > p2.x) {
arc = 'A 20 20, 0, 0, 0,'; arc = 'A 20 20, 0, 0, 0,';
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 ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
} }
if (p1.y === p2.y) { 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} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x p2.x
} ${p2.y}`; } ${p2.y}`;
}
} else {
if (p1.y < p2.y) {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
// Figure out the color of the arrow,arrows going down take the color from the destination branch
colorClassNum = branchPos[commit2.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;
}
if (p1.y > p2.y) {
arc = 'A 20 20, 0, 0, 0,';
radius = 20;
offset = 20;
// Arrows going up take the color from the source branch
colorClassNum = branchPos[commit1.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
p2.x
} ${p2.y}`;
}
if (p1.y === p2.y) {
colorClassNum = branchPos[commit1.branch].index;
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
p2.x
} ${p2.y}`;
}
} }
} }
svg svg
@@ -445,6 +515,13 @@ const drawBranches = (svg, branches) => {
line.attr('y2', pos); line.attr('y2', pos);
line.attr('class', 'branch branch' + adjustIndexForTheme); line.attr('class', 'branch branch' + adjustIndexForTheme);
if (dir === 'TB') {
line.attr('y1', 30);
line.attr('x1', pos);
line.attr('y2', maxPos);
line.attr('x2', pos);
}
lanes.push(pos); lanes.push(pos);
let name = branch.name; let name = branch.name;
@@ -467,7 +544,6 @@ const drawBranches = (svg, branches) => {
.attr('y', -bbox.height / 2 + 8) .attr('y', -bbox.height / 2 + 8)
.attr('width', bbox.width + 18) .attr('width', bbox.width + 18)
.attr('height', bbox.height + 4); .attr('height', bbox.height + 4);
label.attr( label.attr(
'transform', 'transform',
'translate(' + 'translate(' +
@@ -476,7 +552,23 @@ const drawBranches = (svg, branches) => {
(pos - bbox.height / 2 - 1) + (pos - bbox.height / 2 - 1) +
')' ')'
); );
bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')'); if (dir === 'TB') {
bkg
.attr('x', pos - bbox.width/2 - 10)
.attr('y', 0);
label
.attr(
'transform',
'translate(' +
(pos - bbox.width/2 - 5) +
', ' +
(0) +
')'
);
}
if (dir !== 'TB') {
bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
}
}); });
}; };
@@ -495,6 +587,7 @@ 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();
// Position branches vertically // Position branches vertically
let pos = 0; let pos = 0;

1
packages/mermaid/src/diagrams/git/parser/gitGraph.jison
View File

@@ -52,6 +52,7 @@ cherry\-pick(?=\s|$) return 'CHERRY_PICK';
checkout(?=\s|$) return 'CHECKOUT'; checkout(?=\s|$) return 'CHECKOUT';
"LR" return 'DIR'; "LR" return 'DIR';
"BT" return 'DIR'; "BT" return 'DIR';
"TB" return 'DIR';
":" return ':'; ":" return ':';
"^" return 'CARET' "^" return 'CARET'
"options"\r?\n this.begin("options"); // "options"\r?\n this.begin("options"); //