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

Modernization of build environment. Less gulp, more npm. Eslint.

Browse Source
This commit is contained in:
knsv
2015-10-12 07:37:02 +02:00
parent ed65e6df3b
commit 658ed3d790
34 changed files with 3459 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/diagrams/flowchart/d3.js vendored
View File

@@ -4,7 +4,7 @@
if (require) {
try {
d3 = require("d3");
d3 = require('d3');
} catch (e) {}
}

2
src/diagrams/flowchart/dagre-d3.js
View File

@@ -4,7 +4,7 @@ var dagreD3;
//log.debug('setting up dagre-d3');
if (require) {
try {
dagreD3 = require("dagre-d3");
dagreD3 = require('dagre-d3');
//log.debug('Got it (dagre-d3)');
} catch (e) {log.debug('Could not load dagre-d3');}
}

110
src/diagrams/flowchart/flowRenderer.js
View File

@@ -54,7 +54,7 @@ exports.addVertices = function (vert, g) {
//log.debug(vertice.classes);
if(vertice.classes.length >0){
classStr = vertice.classes.join(" ");
classStr = vertice.classes.join(' ');
}
/**
@@ -79,11 +79,11 @@ exports.addVertices = function (vert, g) {
if(conf.htmlLabels) {
labelTypeStr = 'html';
verticeText = verticeText.replace(/fa:fa[\w\-]+/g,function(s,t,u){
return '<i class="fa '+ s.substring(3)+'">&nbsp';
return '<i class="fa '+ s.substring(3)+'">';
});
} else {
verticeText = verticeText.replace(/<br>/g, "\n");
verticeText = verticeText.replace(/<br>/g, '\n');
labelTypeStr = 'text';
}
@@ -180,22 +180,22 @@ exports.addEdges = function (edges, g) {
g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
}else{
g.setEdge(edge.start, edge.end, {
style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
style: style, arrowheadStyle: 'fill: #333', arrowhead: aHead
},cnt);
}
}
// Edge with text
else {
var edgeText = edge.text.replace(/<br>/g, "\n");
var edgeText = edge.text.replace(/<br>/g, '\n');
if(typeof edge.style === 'undefined'){
if (conf.htmlLabels){
g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
g.setEdge(edge.start, edge.end,{labelType: 'html',style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
}else{
g.setEdge(edge.start, edge.end,{labelType: "text", style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: edgeText, arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
g.setEdge(edge.start, edge.end,{labelType: 'text', style: 'stroke: #333; stroke-width: 1.5px;fill:none', labelpos:'c', label: edgeText, arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
}
}else{
g.setEdge(edge.start, edge.end, {
labelType: "text", style: style, arrowheadStyle: "fill: #333", label: edgeText, arrowhead: aHead
labelType: 'text', style: style, arrowheadStyle: 'fill: #333', label: edgeText, arrowhead: aHead
},cnt);
}
}
@@ -325,13 +325,13 @@ exports.draw = function (text, id,isDot) {
{x: s / 2, y: -s},
{x: 0, y: -s / 2}
];
var shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
return d.x + "," + d.y;
}).join(" "))
.attr("rx", 5)
.attr("ry", 5)
.attr("transform", "translate(" + (-s / 2) + "," + (s * 2 / 4) + ")");
var shapeSvg = parent.insert('polygon', ':first-child')
.attr('points', points.map(function (d) {
return d.x + ',' + d.y;
}).join(' '))
.attr('rx', 5)
.attr('ry', 5)
.attr('transform', 'translate(' + (-s / 2) + ',' + (s * 2 / 4) + ')');
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);
};
@@ -349,11 +349,11 @@ exports.draw = function (text, id,isDot) {
{x: -h/2, y: -h},
{x: 0, y: -h/2},
];
var shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
return d.x + "," + d.y;
}).join(" "))
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
var shapeSvg = parent.insert('polygon', ':first-child')
.attr('points', points.map(function (d) {
return d.x + ',' + d.y;
}).join(' '))
.attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')');
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);
};
@@ -371,11 +371,11 @@ exports.draw = function (text, id,isDot) {
{x: w+h/2, y: -h},
{x: 0, y: -h},
];
var shapeSvg = parent.insert("polygon", ":first-child")
.attr("points", points.map(function (d) {
return d.x + "," + d.y;
}).join(" "))
.attr("transform", "translate(" + (-w / 2) + "," + (h * 2 / 4) + ")");
var shapeSvg = parent.insert('polygon', ':first-child')
.attr('points', points.map(function (d) {
return d.x + ',' + d.y;
}).join(' '))
.attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')');
node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point);
};
@@ -384,40 +384,40 @@ exports.draw = function (text, id,isDot) {
// Add our custom arrow - an empty arrowhead
render.arrows().none = function normal(parent, id, edge, type) {
var marker = parent.append("marker")
.attr("id", id)
.attr("viewBox", "0 0 10 10")
.attr("refX", 9)
.attr("refY", 5)
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", 8)
.attr("markerHeight", 6)
.attr("orient", "auto");
var marker = parent.append('marker')
.attr('id', id)
.attr('viewBox', '0 0 10 10')
.attr('refX', 9)
.attr('refY', 5)
.attr('markerUnits', 'strokeWidth')
.attr('markerWidth', 8)
.attr('markerHeight', 6)
.attr('orient', 'auto');
var path = marker.append("path")
.attr("d", "M 0 0 L 0 0 L 0 0 z");
dagreD3.util.applyStyle(path, edge[type + "Style"]);
var path = marker.append('path')
.attr('d', 'M 0 0 L 0 0 L 0 0 z');
dagreD3.util.applyStyle(path, edge[type + 'Style']);
};
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("#" + id);
svgGroup = d3.select("#" + id + " g");
var svg = d3.select('#' + id);
svgGroup = d3.select('#' + id + ' g');
// Run the renderer. This is what draws the final graph.
var element = d3.select("#" + id + " g");
var element = d3.select('#' + id + ' g');
render(element, g);
//var tip = d3.tip().html(function(d) { return d; });
element.selectAll("g.node")
.attr("title", function(){
element.selectAll('g.node')
.attr('title', function(){
return graph.getTooltip(this.id);
});
//
//element.selectAll("g.node")
// .attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
// .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
var svgb = document.querySelector("#" + id);
//element.selectAll('g.node')
// .attr('title', function(v) { return styleTooltip(v, g.node(v).description) })
// .each(function(v) { $(this).tipsy({ gravity: 'w', opacity: 1, html: true }); });
var svgb = document.querySelector('#' + id);
/*
var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
@@ -433,22 +433,22 @@ exports.draw = function (text, id,isDot) {
*/
if(conf.useMaxWidth) {
// Center the graph
svg.attr("height", '100%');
svg.attr("width", conf.width);
//svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
svg.attr("viewBox", '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
svg.attr('height', '100%');
svg.attr('width', conf.width);
//svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
svg.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
svg.attr('style', 'max-width:' + (g.graph().width + 20) + 'px;');
}
else{
// Center the graph
svg.attr("height", g.graph().height );
svg.attr('height', g.graph().height );
if(typeof conf.width === 'undefined'){
svg.attr("width", g.graph().width );
svg.attr('width', g.graph().width );
}else{
svg.attr("width", conf.width );
svg.attr('width', conf.width );
}
//svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
svg.attr("viewBox", '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20)); }
//svg.attr('viewBox', svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
svg.attr('viewBox', '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20)); }
// Index nodes

26
src/diagrams/flowchart/graphDb.js
View File

@@ -233,17 +233,17 @@ var setupToolTips = function(element){
var tooltipElem = d3.select('.mermaidTooltip');
if(tooltipElem[0][0] === null){
tooltipElem = d3.select("body")
.append("div")
.attr("class", "mermaidTooltip")
.style("opacity", 0);
tooltipElem = d3.select('body')
.append('div')
.attr('class', 'mermaidTooltip')
.style('opacity', 0);
}
var svg = d3.select(element).select('svg');
var nodes = svg.selectAll("g.node");
var nodes = svg.selectAll('g.node');
nodes
.on("mouseover", function(d) {
.on('mouseover', function(d) {
var el = d3.select(this);
var title = el.attr('title');
// Dont try to draw a tooltip if no data is provided
@@ -254,17 +254,17 @@ var setupToolTips = function(element){
tooltipElem.transition()
.duration(200)
.style("opacity", '.9');
.style('opacity', '.9');
tooltipElem.html(el.attr('title'))
.style("left", (rect.left+(rect.right-rect.left)/2) + "px")
.style("top", (rect.top-14+document.body.scrollTop) + "px");
.style('left', (rect.left+(rect.right-rect.left)/2) + 'px')
.style('top', (rect.top-14+document.body.scrollTop) + 'px');
el.classed('hover',true);
})
.on("mouseout", function(d) {
.on('mouseout', function(d) {
tooltipElem.transition()
.duration(500)
.style("opacity", 0);
.style('opacity', 0);
var el = d3.select(this);
el.classed('hover',false);
});
@@ -289,7 +289,7 @@ exports.clear = function () {
* @returns {string}
*/
exports.defaultStyle = function () {
return "fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;";
return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';
};
/**
@@ -297,7 +297,7 @@ exports.defaultStyle = function () {
*/
exports.addSubGraph = function (list, title) {
function uniq(a) {
var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
var prims = {'boolean':{}, 'number':{}, 'string':{}}, objs = [];
return a.filter(function(item) {
var type = typeof item;

46
src/diagrams/flowchart/parser/flow.spec.js
View File

@@ -431,7 +431,7 @@ describe('when parsing ',function(){
expect(edges[0].type).toBe('arrow');
});
describe("it should handle interaction, ",function(){
describe('it should handle interaction, ',function(){
it('it should be possible to use click to a callback',function(){
spyOn(graph,'setClickEvent');
@@ -474,7 +474,7 @@ describe('when parsing ',function(){
});
describe("it should handle text on edges",function(){
describe('it should handle text on edges',function(){
it('it should handle text without space',function(){
var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');
@@ -659,7 +659,7 @@ describe('when parsing ',function(){
});
});
describe("it should handle new line type notation",function() {
describe('it should handle new line type notation',function() {
it('it should handle regular lines', function () {
var res = flow.parser.parse('graph TD;A-->B;');
@@ -715,7 +715,7 @@ describe('when parsing ',function(){
});
});
describe("it should handle text on edges using the new notation",function(){
describe('it should handle text on edges using the new notation',function(){
it('it should handle text without space',function(){
var res = flow.parser.parse('graph TD;A-- textNoSpace --xB;');
@@ -818,15 +818,15 @@ describe('when parsing ',function(){
expect(edges[0].text).toBe('text including graph space and v');
});
xit('should handle text on open links',function(){
var res = flow.parser.parse('graph TD;A-- text including graph space --B');
var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();
expect(edges[0].text).toBe('text including graph space');
});
//xit('should handle text on open links',function(){
// var res = flow.parser.parse('graph TD;A-- text including graph space --B');
//
// var vert = flow.parser.yy.getVertices();
// var edges = flow.parser.yy.getEdges();
//
// expect(edges[0].text).toBe('text including graph space');
//
//});
});
@@ -947,7 +947,7 @@ describe('when parsing ',function(){
expect(edges[0].text).toBe(',.?!+-*');
});
describe("it should handle text in vertices, ",function(){
describe('it should handle text in vertices, ',function(){
it('it should handle space',function(){
var res = flow.parser.parse('graph TD;A-->C(Chimpansen hoppar);');
@@ -977,15 +977,15 @@ describe('when parsing ',function(){
expect(vert['C'].type).toBe('round');
expect(vert['C'].text).toBe('Chimpansen hoppar åäö <br> - ÅÄÖ');
});
xit('it should handle åäö, minus and space and br',function(){
var res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->B(Thing);');
var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();
expect(vert['C'].type).toBe('round');
expect(vert['C'].text).toBe(' A[Object&#40;foo,bar&#41;]-->B(Thing);');
});
//xit('it should handle åäö, minus and space and br',function(){
// var res = flow.parser.parse('graph TD; A[Object&#40;foo,bar&#41;]-->B(Thing);');
//
// var vert = flow.parser.yy.getVertices();
// var edges = flow.parser.yy.getEdges();
//
// expect(vert['C'].type).toBe('round');
// expect(vert['C'].text).toBe(' A[Object&#40;foo,bar&#41;]-->B(Thing);');
//});
it('it should handle unicode chars',function(){
var res = flow.parser.parse('graph TD;A-->C(Начало);');