mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-14 21:09:50 +02:00
Refactor code
This commit is contained in:
Tyler Long
@@ -39,88 +39,88 @@ var getGraphId = function (label) {
|
||||
*/
|
||||
var insertMarkers = function (elem) {
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'extensionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 1,7 L18,13 V 1 Z')
|
||||
.attr('id', 'extensionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 1,7 L18,13 V 1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'extensionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead
|
||||
.attr('id', 'extensionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'compositionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
.attr('id', 'compositionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'compositionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
.attr('id', 'compositionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'aggregationStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
.attr('id', 'aggregationStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'aggregationEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
.attr('id', 'aggregationEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'dependencyStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z')
|
||||
.attr('id', 'dependencyStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'dependencyEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z')
|
||||
.attr('id', 'dependencyEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 20)
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z')
|
||||
}
|
||||
|
||||
var edgeCount = 0
|
||||
@@ -138,24 +138,23 @@ var drawEdge = function (elem, path, relation) {
|
||||
}
|
||||
}
|
||||
|
||||
// The data for our line
|
||||
// The data for our line
|
||||
var lineData = path.points
|
||||
|
||||
// This is the accessor function we talked about above
|
||||
// This is the accessor function we talked about above
|
||||
var lineFunction = d3.svg.line()
|
||||
.x(function (d) {
|
||||
return d.x
|
||||
})
|
||||
.y(function (d) {
|
||||
return d.y
|
||||
})
|
||||
// .interpolate('cardinal');
|
||||
.interpolate('basis')
|
||||
.x(function (d) {
|
||||
return d.x
|
||||
})
|
||||
.y(function (d) {
|
||||
return d.y
|
||||
})
|
||||
.interpolate('basis')
|
||||
|
||||
var svgPath = elem.append('path')
|
||||
.attr('d', lineFunction(lineData))
|
||||
.attr('id', 'edge' + edgeCount)
|
||||
.attr('class', 'relation')
|
||||
.attr('d', lineFunction(lineData))
|
||||
.attr('id', 'edge' + edgeCount)
|
||||
.attr('class', 'relation')
|
||||
var url = ''
|
||||
if (conf.arrowMarkerAbsolute) {
|
||||
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search
|
||||
@@ -163,7 +162,6 @@ var drawEdge = function (elem, path, relation) {
|
||||
url = url.replace(/\)/g, '\\)')
|
||||
}
|
||||
|
||||
// console.log(relation.relation.type1);
|
||||
if (relation.relation.type1 !== 'none') {
|
||||
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')')
|
||||
}
|
||||
@@ -171,9 +169,6 @@ var drawEdge = function (elem, path, relation) {
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')')
|
||||
}
|
||||
|
||||
// var bbox = svgPath[0][0].getBBox();
|
||||
// var x = Math.floor(bbox.x + bbox.width/2.0);
|
||||
// var y = Math.floor(bbox.y + bbox.height/2.0);
|
||||
var x, y
|
||||
var l = path.points.length
|
||||
if ((l % 2) !== 0) {
|
||||
@@ -189,28 +184,24 @@ var drawEdge = function (elem, path, relation) {
|
||||
|
||||
if (typeof relation.title !== 'undefined') {
|
||||
var g = elem.append('g')
|
||||
.attr('class', 'classLabel')
|
||||
.attr('class', 'classLabel')
|
||||
var label = g.append('text')
|
||||
.attr('class', 'label')
|
||||
.attr('x', x)
|
||||
.attr('y', y)
|
||||
.attr('fill', 'red')
|
||||
.attr('text-anchor', 'middle')
|
||||
.text(relation.title)
|
||||
.attr('class', 'label')
|
||||
.attr('x', x)
|
||||
.attr('y', y)
|
||||
.attr('fill', 'red')
|
||||
.attr('text-anchor', 'middle')
|
||||
.text(relation.title)
|
||||
|
||||
window.label = label
|
||||
var bounds = label.node().getBBox()
|
||||
|
||||
g.insert('rect', ':first-child')
|
||||
.attr('class', 'box')
|
||||
.attr('x', bounds.x - conf.padding / 2)
|
||||
.attr('y', bounds.y - conf.padding / 2)
|
||||
.attr('width', bounds.width + 2 * conf.padding / 2)
|
||||
.attr('height', bounds.height + 2 * conf.padding / 2)
|
||||
// .append('textpath')
|
||||
// .attr('xlink:href','#edge'+edgeCount)
|
||||
// .attr('text-anchor','middle')
|
||||
// .attr('startOffset','50%')
|
||||
.attr('class', 'box')
|
||||
.attr('x', bounds.x - conf.padding / 2)
|
||||
.attr('y', bounds.y - conf.padding / 2)
|
||||
.attr('width', bounds.width + 2 * conf.padding / 2)
|
||||
.attr('height', bounds.height + 2 * conf.padding / 2)
|
||||
}
|
||||
|
||||
edgeCount++
|
||||
@@ -221,8 +212,8 @@ var drawClass = function (elem, classDef) {
|
||||
|
||||
var addTspan = function (textEl, txt, isFirst) {
|
||||
var tSpan = textEl.append('tspan')
|
||||
.attr('x', conf.padding)
|
||||
.text(txt)
|
||||
.attr('x', conf.padding)
|
||||
.text(txt)
|
||||
if (!isFirst) {
|
||||
tSpan.attr('dy', conf.textHeight)
|
||||
}
|
||||
@@ -237,25 +228,25 @@ var drawClass = function (elem, classDef) {
|
||||
}
|
||||
|
||||
var g = elem.append('g')
|
||||
.attr('id', id)
|
||||
.attr('class', 'classGroup')
|
||||
.attr('id', id)
|
||||
.attr('class', 'classGroup')
|
||||
var title = g.append('text')
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', conf.textHeight + conf.padding)
|
||||
.text(classDef.id)
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', conf.textHeight + conf.padding)
|
||||
.text(classDef.id)
|
||||
|
||||
var titleHeight = title.node().getBBox().height
|
||||
|
||||
var membersLine = g.append('line') // text label for the x axis
|
||||
.attr('x1', 0)
|
||||
.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
|
||||
.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2)
|
||||
.attr('x1', 0)
|
||||
.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2)
|
||||
.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2)
|
||||
|
||||
var members = g.append('text') // text label for the x axis
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', titleHeight + (conf.dividerMargin) + conf.textHeight)
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'classText')
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', titleHeight + (conf.dividerMargin) + conf.textHeight)
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'classText')
|
||||
|
||||
var isFirst = true
|
||||
|
||||
@@ -263,23 +254,19 @@ var drawClass = function (elem, classDef) {
|
||||
addTspan(members, member, isFirst)
|
||||
isFirst = false
|
||||
})
|
||||
// for (var member of classDef.members) {
|
||||
// addTspan(members, member, isFirst);
|
||||
// isFirst = false;
|
||||
// }
|
||||
|
||||
var membersBox = members.node().getBBox()
|
||||
|
||||
var methodsLine = g.append('line') // text label for the x axis
|
||||
.attr('x1', 0)
|
||||
.attr('y1', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
.attr('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
.attr('x1', 0)
|
||||
.attr('y1', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
.attr('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
|
||||
var methods = g.append('text') // text label for the x axis
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'classText')
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight)
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'classText')
|
||||
|
||||
isFirst = true
|
||||
|
||||
@@ -287,17 +274,13 @@ var drawClass = function (elem, classDef) {
|
||||
addTspan(methods, method, isFirst)
|
||||
isFirst = false
|
||||
})
|
||||
// for (var method of classDef.methods) {
|
||||
// addTspan(methods, method, isFirst);
|
||||
// isFirst = false;
|
||||
// }
|
||||
|
||||
var classBox = g.node().getBBox()
|
||||
g.insert('rect', ':first-child')
|
||||
.attr('x', 0)
|
||||
.attr('y', 0)
|
||||
.attr('width', classBox.width + 2 * conf.padding)
|
||||
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin)
|
||||
.attr('x', 0)
|
||||
.attr('y', 0)
|
||||
.attr('width', classBox.width + 2 * conf.padding)
|
||||
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin)
|
||||
|
||||
membersLine.attr('x2', classBox.width + 2 * conf.padding)
|
||||
methodsLine.attr('x2', classBox.width + 2 * conf.padding)
|
||||
@@ -328,22 +311,21 @@ module.exports.draw = function (text, id) {
|
||||
|
||||
log.info('Rendering diagram ' + text)
|
||||
|
||||
/// / Fetch the default direction, use TD if none was found
|
||||
/// / Fetch the default direction, use TD if none was found
|
||||
var diagram = d3.select('#' + id)
|
||||
insertMarkers(diagram)
|
||||
// var svg = diagram.append('svg');
|
||||
|
||||
// Layout graph, Create a new directed graph
|
||||
// Layout graph, Create a new directed graph
|
||||
var g = new dagre.graphlib.Graph({
|
||||
multigraph: true
|
||||
})
|
||||
|
||||
// Set an object for the graph label
|
||||
// Set an object for the graph label
|
||||
g.setGraph({
|
||||
isMultiGraph: true
|
||||
})
|
||||
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
g.setDefaultEdgeLabel(function () {
|
||||
return {}
|
||||
})
|
||||
@@ -354,37 +336,23 @@ module.exports.draw = function (text, id) {
|
||||
for (i = 0; i < keys.length; i++) {
|
||||
var classDef = classes[keys[i]]
|
||||
var node = drawClass(diagram, classDef)
|
||||
// Add nodes to the graph. The first argument is the node id. The second is
|
||||
// metadata about the node. In this case we're going to add labels to each of
|
||||
// our nodes.
|
||||
// Add nodes to the graph. The first argument is the node id. The second is
|
||||
// metadata about the node. In this case we're going to add labels to each of
|
||||
// our nodes.
|
||||
g.setNode(node.id, node)
|
||||
log.info('Org height: ' + node.height)
|
||||
// g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 });
|
||||
// g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 });
|
||||
// g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 });
|
||||
// g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 });
|
||||
// g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 });
|
||||
}
|
||||
|
||||
var relations = cDDb.getRelations()
|
||||
// var i = 0
|
||||
relations.forEach(function (relation) {
|
||||
// i = i + 1
|
||||
log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation))
|
||||
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation})
|
||||
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation })
|
||||
})
|
||||
// for (var relation of relations) {
|
||||
// i = i + 1;
|
||||
// log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation));
|
||||
// g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation});
|
||||
// }
|
||||
dagre.layout(g)
|
||||
g.nodes().forEach(function (v) {
|
||||
if (typeof v !== 'undefined') {
|
||||
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)))
|
||||
d3.select('#' + v).attr('transform', 'translate(' + (g.node(v).x - (g.node(v).width / 2)) + ',' + (g.node(v).y - (g.node(v).height / 2)) + ' )')
|
||||
// d3.select('#' +v +' rect').attr('x',(g.node(v).x-(g.node(v).width/2)))
|
||||
// .attr('y',(g.node(v).y-(g.node(v).height/2)));
|
||||
}
|
||||
})
|
||||
g.edges().forEach(function (e) {
|
||||
@@ -392,21 +360,7 @@ module.exports.draw = function (text, id) {
|
||||
drawEdge(diagram, g.edge(e), g.edge(e).relation)
|
||||
})
|
||||
|
||||
//
|
||||
diagram.attr('height', '100%')
|
||||
diagram.attr('width', '100%')
|
||||
diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20))
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
// if(conf.useMaxWidth) {
|
||||
// diagram.attr('height', '100%');
|
||||
// diagram.attr('width', '100%');
|
||||
// diagram.attr('style', 'max-width:' + (width) + 'px;');
|
||||
// }else{
|
||||
// diagram.attr('height',height);
|
||||
// diagram.attr('width', width );
|
||||
// }
|
||||
// diagram.attr('viewBox', (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user