mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-17 06:20:07 +02:00
Work in progress
This commit is contained in:
Knut Sveidqvist
65
cypress/platform/git-graph.html
Normal file
65
cypress/platform/git-graph.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: rgb(221, 208, 208);
|
||||
/*background:#333;*/
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: white;}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.customCss > rect, .customCss{
|
||||
fill:#FF0000 !important;
|
||||
stroke:#FFFF00 !important;
|
||||
stroke-width:4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
|
||||
gitGraph
|
||||
class BankAccount{
|
||||
+String owner
|
||||
+BigDecimal balance
|
||||
+deposit(amount) bool
|
||||
+withdrawl(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
flowchart: { curve: 'linear', "htmlLabels": true },
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50, showSequenceNumbers: true },
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
// fontFamily: '"arial", sans-serif',
|
||||
// themeVariables: {
|
||||
// fontFamily: '"arial", sans-serif',
|
||||
// },
|
||||
curve: 'linear',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
function callback(){alert('It worked');}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -916,6 +916,24 @@ const config = {
|
||||
***Default value: true**.
|
||||
*/
|
||||
useMaxWidth: true
|
||||
},
|
||||
gitGraph: {
|
||||
nodeSpacing: 150,
|
||||
nodeFillColor: 'yellow',
|
||||
nodeStrokeWidth: 2,
|
||||
nodeStrokeColor: 'grey',
|
||||
lineStrokeWidth: 4,
|
||||
branchOffset: 50,
|
||||
lineColor: 'grey',
|
||||
leftMargin: 50,
|
||||
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
||||
nodeRadius: 10,
|
||||
nodeLabel: {
|
||||
width: 75,
|
||||
height: 100,
|
||||
x: -25,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
341
src/diagrams/git/gitGraphRenderer-old.js
Normal file
341
src/diagrams/git/gitGraphRenderer-old.js
Normal file
@@ -0,0 +1,341 @@
|
||||
import { curveBasis, line, select } from 'd3';
|
||||
|
||||
import db from './gitGraphAst';
|
||||
import gitGraphParser from './parser/gitGraph';
|
||||
import { logger } from '../../logger';
|
||||
import { interpolateToCurve } from '../../utils';
|
||||
|
||||
let allCommitsDict = {};
|
||||
let branchNum;
|
||||
let config = {
|
||||
nodeSpacing: 150,
|
||||
nodeFillColor: 'yellow',
|
||||
nodeStrokeWidth: 2,
|
||||
nodeStrokeColor: 'grey',
|
||||
lineStrokeWidth: 4,
|
||||
branchOffset: 50,
|
||||
lineColor: 'grey',
|
||||
leftMargin: 50,
|
||||
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
||||
nodeRadius: 10,
|
||||
nodeLabel: {
|
||||
width: 75,
|
||||
height: 100,
|
||||
x: -25,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
let apiConfig = {};
|
||||
export const setConf = function(c) {
|
||||
apiConfig = c;
|
||||
};
|
||||
|
||||
function svgCreateDefs(svg) {
|
||||
svg
|
||||
.append('defs')
|
||||
.append('g')
|
||||
.attr('id', 'def-commit')
|
||||
.append('circle')
|
||||
.attr('r', config.nodeRadius)
|
||||
.attr('cx', 0)
|
||||
.attr('cy', 0);
|
||||
svg
|
||||
.select('#def-commit')
|
||||
.append('foreignObject')
|
||||
.attr('width', config.nodeLabel.width)
|
||||
.attr('height', config.nodeLabel.height)
|
||||
.attr('x', config.nodeLabel.x)
|
||||
.attr('y', config.nodeLabel.y)
|
||||
.attr('class', 'node-label')
|
||||
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
|
||||
.append('p')
|
||||
.html('');
|
||||
}
|
||||
|
||||
function svgDrawLine(svg, points, colorIdx, interpolate) {
|
||||
const curve = interpolateToCurve(interpolate, curveBasis);
|
||||
const color = config.branchColors[colorIdx % config.branchColors.length];
|
||||
const lineGen = line()
|
||||
.x(function(d) {
|
||||
return Math.round(d.x);
|
||||
})
|
||||
.y(function(d) {
|
||||
return Math.round(d.y);
|
||||
})
|
||||
.curve(curve);
|
||||
|
||||
svg
|
||||
.append('svg:path')
|
||||
.attr('d', lineGen(points))
|
||||
.style('stroke', color)
|
||||
.style('stroke-width', config.lineStrokeWidth)
|
||||
.style('fill', 'none');
|
||||
}
|
||||
|
||||
// Pass in the element and its pre-transform coords
|
||||
function getElementCoords(element, coords) {
|
||||
coords = coords || element.node().getBBox();
|
||||
const ctm = element.node().getCTM();
|
||||
const xn = ctm.e + coords.x * ctm.a;
|
||||
const yn = ctm.f + coords.y * ctm.d;
|
||||
return {
|
||||
left: xn,
|
||||
top: yn,
|
||||
width: coords.width,
|
||||
height: coords.height
|
||||
};
|
||||
}
|
||||
|
||||
function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
|
||||
logger.debug('svgDrawLineForCommits: ', fromId, toId);
|
||||
const fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
|
||||
const toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));
|
||||
switch (direction) {
|
||||
case 'LR':
|
||||
// (toBbox)
|
||||
// +--------
|
||||
// + (fromBbox)
|
||||
if (fromBbox.left - toBbox.left > config.nodeSpacing) {
|
||||
const lineStart = {
|
||||
x: fromBbox.left - config.nodeSpacing,
|
||||
y: toBbox.top + toBbox.height / 2
|
||||
};
|
||||
const lineEnd = { x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height / 2 };
|
||||
svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');
|
||||
svgDrawLine(
|
||||
svg,
|
||||
[
|
||||
{ x: fromBbox.left, y: fromBbox.top + fromBbox.height / 2 },
|
||||
{ x: fromBbox.left - config.nodeSpacing / 2, y: fromBbox.top + fromBbox.height / 2 },
|
||||
{ x: fromBbox.left - config.nodeSpacing / 2, y: lineStart.y },
|
||||
lineStart
|
||||
],
|
||||
color
|
||||
);
|
||||
} else {
|
||||
svgDrawLine(
|
||||
svg,
|
||||
[
|
||||
{
|
||||
x: fromBbox.left,
|
||||
y: fromBbox.top + fromBbox.height / 2
|
||||
},
|
||||
{
|
||||
x: fromBbox.left - config.nodeSpacing / 2,
|
||||
y: fromBbox.top + fromBbox.height / 2
|
||||
},
|
||||
{
|
||||
x: fromBbox.left - config.nodeSpacing / 2,
|
||||
y: toBbox.top + toBbox.height / 2
|
||||
},
|
||||
{
|
||||
x: toBbox.left + toBbox.width,
|
||||
y: toBbox.top + toBbox.height / 2
|
||||
}
|
||||
],
|
||||
color
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'BT':
|
||||
// + (fromBbox)
|
||||
// |
|
||||
// |
|
||||
// + (toBbox)
|
||||
if (toBbox.top - fromBbox.top > config.nodeSpacing) {
|
||||
const lineStart = {
|
||||
x: toBbox.left + toBbox.width / 2,
|
||||
y: fromBbox.top + fromBbox.height + config.nodeSpacing
|
||||
};
|
||||
const lineEnd = { x: toBbox.left + toBbox.width / 2, y: toBbox.top };
|
||||
svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');
|
||||
svgDrawLine(
|
||||
svg,
|
||||
[
|
||||
{ x: fromBbox.left + fromBbox.width / 2, y: fromBbox.top + fromBbox.height },
|
||||
{
|
||||
x: fromBbox.left + fromBbox.width / 2,
|
||||
y: fromBbox.top + fromBbox.height + config.nodeSpacing / 2
|
||||
},
|
||||
{ x: toBbox.left + toBbox.width / 2, y: lineStart.y - config.nodeSpacing / 2 },
|
||||
lineStart
|
||||
],
|
||||
color
|
||||
);
|
||||
} else {
|
||||
svgDrawLine(
|
||||
svg,
|
||||
[
|
||||
{
|
||||
x: fromBbox.left + fromBbox.width / 2,
|
||||
y: fromBbox.top + fromBbox.height
|
||||
},
|
||||
{
|
||||
x: fromBbox.left + fromBbox.width / 2,
|
||||
y: fromBbox.top + config.nodeSpacing / 2
|
||||
},
|
||||
{
|
||||
x: toBbox.left + toBbox.width / 2,
|
||||
y: toBbox.top - config.nodeSpacing / 2
|
||||
},
|
||||
{
|
||||
x: toBbox.left + toBbox.width / 2,
|
||||
y: toBbox.top
|
||||
}
|
||||
],
|
||||
color
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function cloneNode(svg, selector) {
|
||||
return svg
|
||||
.select(selector)
|
||||
.node()
|
||||
.cloneNode(true);
|
||||
}
|
||||
|
||||
function renderCommitHistory(svg, commitid, branches, direction) {
|
||||
let commit;
|
||||
const numCommits = Object.keys(allCommitsDict).length;
|
||||
if (typeof commitid === 'string') {
|
||||
do {
|
||||
commit = allCommitsDict[commitid];
|
||||
logger.debug('in renderCommitHistory', commit.id, commit.seq);
|
||||
if (svg.select('#node-' + commitid).size() > 0) {
|
||||
return;
|
||||
}
|
||||
svg
|
||||
.append(function() {
|
||||
return cloneNode(svg, '#def-commit');
|
||||
})
|
||||
.attr('class', 'commit')
|
||||
.attr('id', function() {
|
||||
return 'node-' + commit.id;
|
||||
})
|
||||
.attr('transform', function() {
|
||||
switch (direction) {
|
||||
case 'LR':
|
||||
return (
|
||||
'translate(' +
|
||||
(commit.seq * config.nodeSpacing + config.leftMargin) +
|
||||
', ' +
|
||||
branchNum * config.branchOffset +
|
||||
')'
|
||||
);
|
||||
case 'BT':
|
||||
return (
|
||||
'translate(' +
|
||||
(branchNum * config.branchOffset + config.leftMargin) +
|
||||
', ' +
|
||||
(numCommits - commit.seq) * config.nodeSpacing +
|
||||
')'
|
||||
);
|
||||
}
|
||||
})
|
||||
.attr('fill', config.nodeFillColor)
|
||||
.attr('stroke', config.nodeStrokeColor)
|
||||
.attr('stroke-width', config.nodeStrokeWidth);
|
||||
|
||||
let branch;
|
||||
for (let branchName in branches) {
|
||||
if (branches[branchName].commit === commit) {
|
||||
branch = branches[branchName];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (branch) {
|
||||
logger.debug('found branch ', branch.name);
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'branch-label')
|
||||
.text(branch.name + ', ');
|
||||
}
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'commit-id')
|
||||
.text(commit.id);
|
||||
if (commit.message !== '' && direction === 'BT') {
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'commit-msg')
|
||||
.text(', ' + commit.message);
|
||||
}
|
||||
commitid = commit.parent;
|
||||
} while (commitid && allCommitsDict[commitid]);
|
||||
}
|
||||
|
||||
if (Array.isArray(commitid)) {
|
||||
logger.debug('found merge commmit', commitid);
|
||||
renderCommitHistory(svg, commitid[0], branches, direction);
|
||||
branchNum++;
|
||||
renderCommitHistory(svg, commitid[1], branches, direction);
|
||||
branchNum--;
|
||||
}
|
||||
}
|
||||
|
||||
function renderLines(svg, commit, direction, branchColor) {
|
||||
branchColor = branchColor || 0;
|
||||
while (commit.seq > 0 && !commit.lineDrawn) {
|
||||
if (typeof commit.parent === 'string') {
|
||||
svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);
|
||||
commit.lineDrawn = true;
|
||||
commit = allCommitsDict[commit.parent];
|
||||
} else if (Array.isArray(commit.parent)) {
|
||||
svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction, branchColor);
|
||||
svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction, branchColor + 1);
|
||||
renderLines(svg, allCommitsDict[commit.parent[1]], direction, branchColor + 1);
|
||||
commit.lineDrawn = true;
|
||||
commit = allCommitsDict[commit.parent[0]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const draw = function(txt, id, ver) {
|
||||
try {
|
||||
const parser = gitGraphParser.parser;
|
||||
parser.yy = db;
|
||||
parser.yy.clear();
|
||||
|
||||
logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
||||
// Parse the graph definition
|
||||
parser.parse(txt + '\n');
|
||||
|
||||
config = Object.assign(config, apiConfig, db.getOptions());
|
||||
logger.debug('effective options', config);
|
||||
const direction = db.getDirection();
|
||||
allCommitsDict = db.getCommits();
|
||||
const branches = db.getBranchesAsObjArray();
|
||||
if (direction === 'BT') {
|
||||
config.nodeLabel.x = branches.length * config.branchOffset;
|
||||
config.nodeLabel.width = '100%';
|
||||
config.nodeLabel.y = -1 * 2 * config.nodeRadius;
|
||||
}
|
||||
const svg = select(`[id="${id}"]`);
|
||||
svgCreateDefs(svg);
|
||||
branchNum = 1;
|
||||
for (let branch in branches) {
|
||||
const v = branches[branch];
|
||||
renderCommitHistory(svg, v.commit.id, branches, direction);
|
||||
renderLines(svg, v.commit, direction);
|
||||
branchNum++;
|
||||
}
|
||||
svg.attr('height', function() {
|
||||
if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;
|
||||
return (branches.length + 1) * config.branchOffset;
|
||||
});
|
||||
} catch (e) {
|
||||
logger.error('Error while rendering gitgraph');
|
||||
logger.error(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
setConf,
|
||||
draw
|
||||
};
|
||||
@@ -1,36 +1,21 @@
|
||||
import { curveBasis, line, select } from 'd3';
|
||||
|
||||
import db from './gitGraphAst';
|
||||
// import db from './gitGraphAst';
|
||||
import * as db from './mockDb';
|
||||
import gitGraphParser from './parser/gitGraph';
|
||||
import { logger } from '../../logger';
|
||||
import { interpolateToCurve } from '../../utils';
|
||||
import { getConfig } from '../../config';
|
||||
/* eslint-disable */
|
||||
|
||||
let allCommitsDict = {};
|
||||
let branchNum;
|
||||
let config = {
|
||||
nodeSpacing: 150,
|
||||
nodeFillColor: 'yellow',
|
||||
nodeStrokeWidth: 2,
|
||||
nodeStrokeColor: 'grey',
|
||||
lineStrokeWidth: 4,
|
||||
branchOffset: 50,
|
||||
lineColor: 'grey',
|
||||
leftMargin: 50,
|
||||
branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
|
||||
nodeRadius: 10,
|
||||
nodeLabel: {
|
||||
width: 75,
|
||||
height: 100,
|
||||
x: -25,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
let apiConfig = {};
|
||||
export const setConf = function(c) {
|
||||
apiConfig = c;
|
||||
};
|
||||
|
||||
// let apiConfig = {};
|
||||
// export const setConf = function(c) {
|
||||
// apiConfig = c;
|
||||
// };
|
||||
function svgCreateDefs(svg) {
|
||||
const config = getConfig().gitGraph;
|
||||
svg
|
||||
.append('defs')
|
||||
.append('g')
|
||||
@@ -53,6 +38,7 @@ function svgCreateDefs(svg) {
|
||||
}
|
||||
|
||||
function svgDrawLine(svg, points, colorIdx, interpolate) {
|
||||
const config = getConfig().gitGraph;
|
||||
const curve = interpolateToCurve(interpolate, curveBasis);
|
||||
const color = config.branchColors[colorIdx % config.branchColors.length];
|
||||
const lineGen = line()
|
||||
@@ -87,6 +73,7 @@ function getElementCoords(element, coords) {
|
||||
}
|
||||
|
||||
function svgDrawLineForCommits(svg, fromId, toId, direction, color) {
|
||||
const config = getConfig().gitGraph;
|
||||
logger.debug('svgDrawLineForCommits: ', fromId, toId);
|
||||
const fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));
|
||||
const toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));
|
||||
@@ -197,87 +184,88 @@ function cloneNode(svg, selector) {
|
||||
.cloneNode(true);
|
||||
}
|
||||
|
||||
function renderCommitHistory(svg, commitid, branches, direction) {
|
||||
let commit;
|
||||
const numCommits = Object.keys(allCommitsDict).length;
|
||||
if (typeof commitid === 'string') {
|
||||
do {
|
||||
commit = allCommitsDict[commitid];
|
||||
logger.debug('in renderCommitHistory', commit.id, commit.seq);
|
||||
if (svg.select('#node-' + commitid).size() > 0) {
|
||||
return;
|
||||
}
|
||||
svg
|
||||
.append(function() {
|
||||
return cloneNode(svg, '#def-commit');
|
||||
})
|
||||
.attr('class', 'commit')
|
||||
.attr('id', function() {
|
||||
return 'node-' + commit.id;
|
||||
})
|
||||
.attr('transform', function() {
|
||||
switch (direction) {
|
||||
case 'LR':
|
||||
return (
|
||||
'translate(' +
|
||||
(commit.seq * config.nodeSpacing + config.leftMargin) +
|
||||
', ' +
|
||||
branchNum * config.branchOffset +
|
||||
')'
|
||||
);
|
||||
case 'BT':
|
||||
return (
|
||||
'translate(' +
|
||||
(branchNum * config.branchOffset + config.leftMargin) +
|
||||
', ' +
|
||||
(numCommits - commit.seq) * config.nodeSpacing +
|
||||
')'
|
||||
);
|
||||
}
|
||||
})
|
||||
.attr('fill', config.nodeFillColor)
|
||||
.attr('stroke', config.nodeStrokeColor)
|
||||
.attr('stroke-width', config.nodeStrokeWidth);
|
||||
// function renderCommitHistory(svg, commitid, branches, direction) {
|
||||
// const config = getConfig().gitGraph;
|
||||
// let commit;
|
||||
// const numCommits = Object.keys(allCommitsDict).length;
|
||||
// if (typeof commitid === 'string') {
|
||||
// do {
|
||||
// commit = allCommitsDict[commitid];
|
||||
// logger.debug('in renderCommitHistory', commit.id, commit.seq);
|
||||
// if (svg.select('#node-' + commitid).size() > 0) {
|
||||
// return;
|
||||
// }
|
||||
// svg
|
||||
// .append(function() {
|
||||
// return cloneNode(svg, '#def-commit');
|
||||
// })
|
||||
// .attr('class', 'commit')
|
||||
// .attr('id', function() {
|
||||
// return 'node-' + commit.id;
|
||||
// })
|
||||
// .attr('transform', function() {
|
||||
// switch (direction) {
|
||||
// case 'LR':
|
||||
// return (
|
||||
// 'translate(' +
|
||||
// (commit.seq * config.nodeSpacing + config.leftMargin) +
|
||||
// ', ' +
|
||||
// branchNum * config.branchOffset +
|
||||
// ')'
|
||||
// );
|
||||
// case 'BT':
|
||||
// return (
|
||||
// 'translate(' +
|
||||
// (branchNum * config.branchOffset + config.leftMargin) +
|
||||
// ', ' +
|
||||
// (numCommits - commit.seq) * config.nodeSpacing +
|
||||
// ')'
|
||||
// );
|
||||
// }
|
||||
// })
|
||||
// .attr('fill', config.nodeFillColor)
|
||||
// .attr('stroke', config.nodeStrokeColor)
|
||||
// .attr('stroke-width', config.nodeStrokeWidth);
|
||||
|
||||
let branch;
|
||||
for (let branchName in branches) {
|
||||
if (branches[branchName].commit === commit) {
|
||||
branch = branches[branchName];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (branch) {
|
||||
logger.debug('found branch ', branch.name);
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'branch-label')
|
||||
.text(branch.name + ', ');
|
||||
}
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'commit-id')
|
||||
.text(commit.id);
|
||||
if (commit.message !== '' && direction === 'BT') {
|
||||
svg
|
||||
.select('#node-' + commit.id + ' p')
|
||||
.append('xhtml:span')
|
||||
.attr('class', 'commit-msg')
|
||||
.text(', ' + commit.message);
|
||||
}
|
||||
commitid = commit.parent;
|
||||
} while (commitid && allCommitsDict[commitid]);
|
||||
}
|
||||
// let branch;
|
||||
// for (let branchName in branches) {
|
||||
// if (branches[branchName].commit === commit) {
|
||||
// branch = branches[branchName];
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// if (branch) {
|
||||
// logger.debug('found branch ', branch.name);
|
||||
// svg
|
||||
// .select('#node-' + commit.id + ' p')
|
||||
// .append('xhtml:span')
|
||||
// .attr('class', 'branch-label')
|
||||
// .text(branch.name + ', ');
|
||||
// }
|
||||
// svg
|
||||
// .select('#node-' + commit.id + ' p')
|
||||
// .append('xhtml:span')
|
||||
// .attr('class', 'commit-id')
|
||||
// .text(commit.id);
|
||||
// if (commit.message !== '' && direction === 'BT') {
|
||||
// svg
|
||||
// .select('#node-' + commit.id + ' p')
|
||||
// .append('xhtml:span')
|
||||
// .attr('class', 'commit-msg')
|
||||
// .text(', ' + commit.message);
|
||||
// }
|
||||
// commitid = commit.parent;
|
||||
// } while (commitid && allCommitsDict[commitid]);
|
||||
// }
|
||||
|
||||
if (Array.isArray(commitid)) {
|
||||
logger.debug('found merge commmit', commitid);
|
||||
renderCommitHistory(svg, commitid[0], branches, direction);
|
||||
branchNum++;
|
||||
renderCommitHistory(svg, commitid[1], branches, direction);
|
||||
branchNum--;
|
||||
}
|
||||
}
|
||||
// if (Array.isArray(commitid)) {
|
||||
// logger.debug('found merge commmit', commitid);
|
||||
// renderCommitHistory(svg, commitid[0], branches, direction);
|
||||
// branchNum++;
|
||||
// renderCommitHistory(svg, commitid[1], branches, direction);
|
||||
// branchNum--;
|
||||
// }
|
||||
// }
|
||||
|
||||
function renderLines(svg, commit, direction, branchColor) {
|
||||
branchColor = branchColor || 0;
|
||||
@@ -297,45 +285,42 @@ function renderLines(svg, commit, direction, branchColor) {
|
||||
}
|
||||
|
||||
export const draw = function(txt, id, ver) {
|
||||
try {
|
||||
const parser = gitGraphParser.parser;
|
||||
parser.yy = db;
|
||||
parser.yy.clear();
|
||||
const config = getConfig().gitGraph;
|
||||
|
||||
logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
||||
// Parse the graph definition
|
||||
parser.parse(txt + '\n');
|
||||
// try {
|
||||
const parser = gitGraphParser.parser;
|
||||
parser.yy = db;
|
||||
parser.yy.clear();
|
||||
|
||||
config = Object.assign(config, apiConfig, db.getOptions());
|
||||
logger.debug('effective options', config);
|
||||
const direction = db.getDirection();
|
||||
allCommitsDict = db.getCommits();
|
||||
const branches = db.getBranchesAsObjArray();
|
||||
if (direction === 'BT') {
|
||||
config.nodeLabel.x = branches.length * config.branchOffset;
|
||||
config.nodeLabel.width = '100%';
|
||||
config.nodeLabel.y = -1 * 2 * config.nodeRadius;
|
||||
}
|
||||
const svg = select(`[id="${id}"]`);
|
||||
svgCreateDefs(svg);
|
||||
branchNum = 1;
|
||||
for (let branch in branches) {
|
||||
const v = branches[branch];
|
||||
renderCommitHistory(svg, v.commit.id, branches, direction);
|
||||
renderLines(svg, v.commit, direction);
|
||||
branchNum++;
|
||||
}
|
||||
svg.attr('height', function() {
|
||||
if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;
|
||||
return (branches.length + 1) * config.branchOffset;
|
||||
});
|
||||
} catch (e) {
|
||||
logger.error('Error while rendering gitgraph');
|
||||
logger.error(e.message);
|
||||
logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
|
||||
// // Parse the graph definition
|
||||
// parser.parse(txt + '\n');
|
||||
|
||||
// config = Object.assign(config, apiConfig, db.getOptions());
|
||||
logger.debug('effective options', config);
|
||||
const direction = db.getDirection();
|
||||
allCommitsDict = db.getCommits();
|
||||
const branches = db.getBranchesAsObjArray();
|
||||
|
||||
const svg = select(`[id="${id}"]`);
|
||||
svgCreateDefs(svg);
|
||||
branchNum = 1;
|
||||
for (let branch in branches) {
|
||||
const v = branches[branch];
|
||||
// renderCommitHistory(svg, v.commit.id, branches, direction);
|
||||
renderLines(svg, v.commit, direction);
|
||||
branchNum++;
|
||||
}
|
||||
svg.attr('height', function() {
|
||||
if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;
|
||||
return (branches.length + 1) * config.branchOffset;
|
||||
});
|
||||
// } catch (e) {
|
||||
// logger.error('Error while rendering gitgraph');
|
||||
// logger.error(e.message);
|
||||
// }
|
||||
};
|
||||
|
||||
export default {
|
||||
setConf,
|
||||
draw
|
||||
};
|
||||
|
||||
21
src/diagrams/git/layout.js
Normal file
21
src/diagrams/git/layout.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { getConfig } from '../../config';
|
||||
|
||||
export default (dir, _branches, _commits) => { // eslint-disable-line
|
||||
const config = getConfig().gitGraph;
|
||||
const branches = [];
|
||||
const commits = [];
|
||||
|
||||
for (let i = 0; i < _branches.length; i++) {
|
||||
const branch = Object.assign({}, _branches[i]);
|
||||
if (dir === 'TB' || dir === 'BT') {
|
||||
branch.x = config.branchOffset * i;
|
||||
branch.y = -1;
|
||||
} else {
|
||||
branch.y = config.branchOffset * i;
|
||||
branch.x = -1;
|
||||
}
|
||||
branches.push(branch);
|
||||
}
|
||||
|
||||
return { branches, commits };
|
||||
};
|
||||
196
src/diagrams/git/mockDb.js
Normal file
196
src/diagrams/git/mockDb.js
Normal file
@@ -0,0 +1,196 @@
|
||||
export const getDirection = () => 'LR';
|
||||
export const getCommits = () => {
|
||||
return {
|
||||
'0000001': {
|
||||
id: '0000001',
|
||||
seq: 1,
|
||||
message: '',
|
||||
branch: 'master',
|
||||
parent: null,
|
||||
tag: 'v0.1',
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000002': {
|
||||
id: '0000002',
|
||||
seq: 2,
|
||||
message: '',
|
||||
branch: 'develop',
|
||||
parent: '0000001',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000003': {
|
||||
id: '0000003',
|
||||
seq: 3,
|
||||
message: '',
|
||||
branch: 'featureB',
|
||||
parent: '0000002',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000004': {
|
||||
id: '0000004',
|
||||
seq: 4,
|
||||
message: '',
|
||||
branch: 'hotfix',
|
||||
parent: '0000001',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000005': {
|
||||
id: '0000005',
|
||||
seq: 5,
|
||||
message: '',
|
||||
branch: 'delevop',
|
||||
parent: '0000002',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000006': {
|
||||
id: '0000006',
|
||||
seq: 6,
|
||||
message: '',
|
||||
branch: 'featureB',
|
||||
parent: '0000003',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000007': {
|
||||
id: '0000007',
|
||||
seq: 7,
|
||||
message: '',
|
||||
branch: 'master',
|
||||
parent: '0000004',
|
||||
tag: 'v0.2',
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000008': {
|
||||
id: '0000008',
|
||||
seq: 8,
|
||||
message: '',
|
||||
branch: 'featureB',
|
||||
parent: '0000006',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000009': {
|
||||
id: '0000009',
|
||||
seq: 9,
|
||||
message: '',
|
||||
branch: 'featureA',
|
||||
parent: '0000005',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000010': {
|
||||
id: '0000010',
|
||||
seq: 10,
|
||||
message: '',
|
||||
branch: 'master',
|
||||
parent: ['0000004', '0000005'],
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000011': {
|
||||
id: '0000011',
|
||||
seq: 11,
|
||||
message: '',
|
||||
branch: 'featureA',
|
||||
parent: '0000009',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: ''
|
||||
},
|
||||
'0000012': {
|
||||
id: '0000012',
|
||||
seq: 12,
|
||||
message: '',
|
||||
branch: 'featureB',
|
||||
parent: '0000008',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000013': {
|
||||
id: '0000013',
|
||||
seq: 13,
|
||||
message: '',
|
||||
branch: 'develop',
|
||||
parent: ['0000010', '0000011'],
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000014': {
|
||||
id: '0000014',
|
||||
seq: 14,
|
||||
message: '',
|
||||
branch: 'release',
|
||||
parent: '0000013',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000015': {
|
||||
id: '0000015',
|
||||
seq: 15,
|
||||
message: '',
|
||||
branch: 'master',
|
||||
parent: '0000007',
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000016': {
|
||||
id: '0000016',
|
||||
seq: 16,
|
||||
message: '',
|
||||
branch: 'release',
|
||||
parent: ['0000014', '0000015'],
|
||||
tag: 'v1.0',
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
},
|
||||
'0000017': {
|
||||
id: '0000017',
|
||||
seq: 17,
|
||||
message: '',
|
||||
branch: 'develop',
|
||||
parent: ['0000013', '0000016'],
|
||||
tag: null,
|
||||
commitType: 'normal',
|
||||
note: null
|
||||
}
|
||||
};
|
||||
};
|
||||
export const clear = () => {};
|
||||
export const getBranchesAsObjArray = () => [
|
||||
{
|
||||
name: 'master'
|
||||
},
|
||||
{
|
||||
name: 'hotfix'
|
||||
},
|
||||
{
|
||||
name: 'release'
|
||||
},
|
||||
{
|
||||
name: 'develop'
|
||||
},
|
||||
{
|
||||
name: 'featureA'
|
||||
},
|
||||
{
|
||||
name: 'featureB'
|
||||
}
|
||||
];
|
||||
@@ -327,7 +327,6 @@ const render = function(id, _txt, cb, container) {
|
||||
switch (graphType) {
|
||||
case 'git':
|
||||
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
|
||||
gitGraphRenderer.setConf(cnf.git);
|
||||
gitGraphRenderer.draw(txt, id, false);
|
||||
break;
|
||||
case 'flowchart':
|
||||
@@ -524,7 +523,7 @@ const handleDirective = function(p, directive, type) {
|
||||
};
|
||||
|
||||
function updateRendererConfigs(conf) {
|
||||
gitGraphRenderer.setConf(conf.git);
|
||||
// gitGraphRenderer.setConf(conf.git); // Todo Remove all of these
|
||||
flowRenderer.setConf(conf.flowchart);
|
||||
flowRendererV2.setConf(conf.flowchart);
|
||||
if (typeof conf['sequenceDiagram'] !== 'undefined') {
|
||||
|
||||
Reference in New Issue
Block a user