mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 23:39:50 +02:00
Adding missing files
This commit is contained in:
196
src/main.js
Normal file
196
src/main.js
Normal file
@@ -0,0 +1,196 @@
|
||||
var mermaid;
|
||||
if (typeof mermaid === 'undefined') {
|
||||
mermaid = {}
|
||||
}
|
||||
|
||||
mermaid.addVertices = function (vert, g) {
|
||||
var keys = Object.keys(vert);
|
||||
|
||||
keys.forEach(function (id) {
|
||||
var vertice = vert[id];
|
||||
var verticeText;
|
||||
|
||||
|
||||
console.log(vertice.styles.length);
|
||||
|
||||
var i;
|
||||
var style = '';
|
||||
for (i = 0; i < vertice.styles.length; i++) {
|
||||
if (typeof vertice.styles[i] !== 'undefined') {
|
||||
style = style + vertice.styles[i] + ';';
|
||||
}
|
||||
}
|
||||
|
||||
if (vertice.text === undefined) {
|
||||
verticeText = vertice.id;
|
||||
}
|
||||
else {
|
||||
verticeText = vertice.text;
|
||||
}
|
||||
|
||||
|
||||
if (style === '') {
|
||||
//style = graph.defaultStyle();
|
||||
}
|
||||
|
||||
console.log('g.setNode("' + vertice.id + '", { label: "' + verticeText + '" });');
|
||||
if (vertice.type === 'round') {
|
||||
g.setNode(vertice.id, {label: verticeText, rx: 5, ry: 5, style: style});
|
||||
} else {
|
||||
if (vertice.type === 'diamond') {
|
||||
g.setNode(vertice.id, {shape: "question", label: verticeText, rx: 0, ry: 0, style: style});
|
||||
} else {
|
||||
g.setNode(vertice.id, {label: verticeText, rx: 0, ry: 0, style: style});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
mermaid.addEdges = function (edges, g) {
|
||||
edges.forEach(function (edge) {
|
||||
var type, style;
|
||||
|
||||
if(typeof edge.type === 'undefined'){
|
||||
type = 'arrow';
|
||||
}else{
|
||||
type = edge.type;
|
||||
}
|
||||
if(typeof edge.style === 'undefined'){
|
||||
style = 'arrow';
|
||||
}else{
|
||||
type = edge.type;
|
||||
}
|
||||
|
||||
var edgeText;
|
||||
//console.log(vertice);
|
||||
if (edge.text === 'undefined') {
|
||||
if(typeof edge.style === 'undefined'){
|
||||
g.setEdge(edge.start, edge.end,{ arrowheadStyle: "fill: #333"});
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
style: edge.style, arrowheadStyle: "fill: #333"
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
if(typeof edge.style === 'undefined'){
|
||||
g.setEdge(edge.start, edge.end,{label: edge.text, arrowheadStyle: "fill: #333"});
|
||||
}else{
|
||||
g.setEdge(edge.start, edge.end, {
|
||||
style: edge.style, arrowheadStyle: "fill: #333", label: edge.text
|
||||
});
|
||||
}
|
||||
}
|
||||
console.log('g.setEdge("' + edge.start + '","' + edge.end + '") ---');
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
mermaid.drawChart = function (text, id) {
|
||||
|
||||
console.log('drawing char with id:' + id);
|
||||
console.log(text);
|
||||
mermaid.graph.clear();
|
||||
parser.yy = mermaid.graph;
|
||||
|
||||
var err = function () {
|
||||
console.log('Syntax error!!!');
|
||||
};
|
||||
|
||||
parser.parse(text);
|
||||
|
||||
var vert = mermaid.graph.getVertices();
|
||||
var edges = mermaid.graph.getEdges();
|
||||
|
||||
console.log(edges);
|
||||
|
||||
var keys = Object.keys(vert);
|
||||
|
||||
// Create the input mermaid.graph
|
||||
var g = new dagreD3.graphlib.Graph()
|
||||
.setGraph({
|
||||
//rankdir: "LR",
|
||||
marginx: 20,
|
||||
marginy: 20
|
||||
})
|
||||
.setDefaultEdgeLabel(function () {
|
||||
return {};
|
||||
});
|
||||
|
||||
console.log(g);
|
||||
|
||||
this.addVertices(vert, g);
|
||||
this.addEdges(edges, g);
|
||||
|
||||
// Create the renderer
|
||||
var render = new dagreD3.render();
|
||||
|
||||
// Add our custom shape
|
||||
render.shapes().question = function (parent, bbox, node) {
|
||||
var w = bbox.width,
|
||||
h = bbox.height * 3,
|
||||
points = [
|
||||
{x: w / 2, y: 0},
|
||||
{x: w, y: -h / 2},
|
||||
{x: w / 2, y: -h},
|
||||
{x: 0, y: -h / 2}
|
||||
];
|
||||
shapeSvg = parent.insert("polygon", ":first-child")
|
||||
.attr("points", points.map(function (d) {
|
||||
return d.x + "," + d.y;
|
||||
}).join(" "))
|
||||
.style("fill", "#fff")
|
||||
.style("stroke", "#333")
|
||||
.attr("rx", 5)
|
||||
.attr("ry", 5)
|
||||
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
|
||||
node.intersect = function (point) {
|
||||
return dagreD3.intersect.polygon(node, points, point);
|
||||
};
|
||||
return shapeSvg;
|
||||
};
|
||||
// Set up an SVG group so that we can translate the final graph.
|
||||
var svg = d3.select("#" + id);
|
||||
svgGroup = d3.select("#" + id + " g");
|
||||
|
||||
// Run the renderer. This is what draws the final graph.
|
||||
render(d3.select("#" + id + " g"), g);
|
||||
|
||||
// Center the graph
|
||||
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
|
||||
//svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
|
||||
svg.attr("height", g.graph().height + 40);
|
||||
};
|
||||
|
||||
mermaid.init = function () {
|
||||
var arr = document.querySelectorAll('.mermaid');
|
||||
|
||||
|
||||
var cnt = 0;
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
var element = arr[i];
|
||||
var id;
|
||||
//if(element.id.length === 0){
|
||||
id = 'mermaidChart' + cnt;
|
||||
//arr[i].id = id;
|
||||
cnt++;
|
||||
//}
|
||||
//else{
|
||||
// id=element.id;
|
||||
//}
|
||||
|
||||
var chartText = element.textContent.trim();
|
||||
|
||||
console.log(element);
|
||||
|
||||
element.innerHTML = '<svg id="' + id + '" width="100%">' +
|
||||
'<g />' +
|
||||
'</svg>';
|
||||
|
||||
|
||||
this.drawChart(chartText, id);
|
||||
}
|
||||
;
|
||||
};
|
||||
mermaid.init();
|
Reference in New Issue
Block a user