mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-12 11:59:39 +02:00
Auto fix standard style voilations
This commit is contained in:
Tyler Long
@@ -2,43 +2,43 @@
|
||||
* Created by knut on 14-11-23.
|
||||
*/
|
||||
|
||||
var cd = require('./parser/classDiagram').parser;
|
||||
var cDDb = require('./classDb');
|
||||
cd.yy = cDDb;
|
||||
var d3 = require('../../d3');
|
||||
var Logger = require('../../logger');
|
||||
var log = Logger.Log;
|
||||
var dagre = require('dagre');
|
||||
var cd = require('./parser/classDiagram').parser
|
||||
var cDDb = require('./classDb')
|
||||
cd.yy = cDDb
|
||||
var d3 = require('../../d3')
|
||||
var Logger = require('../../logger')
|
||||
var log = Logger.Log
|
||||
var dagre = require('dagre')
|
||||
|
||||
var idCache;
|
||||
idCache = {};
|
||||
var idCache
|
||||
idCache = {}
|
||||
|
||||
var classCnt = 0;
|
||||
var classCnt = 0
|
||||
var conf = {
|
||||
dividerMargin: 10,
|
||||
padding: 5,
|
||||
textHeight: 14
|
||||
};
|
||||
dividerMargin: 10,
|
||||
padding: 5,
|
||||
textHeight: 14
|
||||
}
|
||||
|
||||
// Todo optimize
|
||||
var getGraphId = function (label) {
|
||||
var keys = Object.keys(idCache);
|
||||
var keys = Object.keys(idCache)
|
||||
|
||||
var i;
|
||||
for(i=0;i<keys.length;i++){
|
||||
if(idCache[keys[i]].label === label){
|
||||
return keys[i];
|
||||
}
|
||||
var i
|
||||
for (i = 0; i < keys.length; i++) {
|
||||
if (idCache[keys[i]].label === label) {
|
||||
return keys[i]
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
return undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
*/
|
||||
var insertMarkers = function (elem) {
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'extensionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
@@ -47,9 +47,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 1,7 L18,13 V 1 Z');
|
||||
.attr('d', 'M 1,7 L18,13 V 1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'extensionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@@ -57,9 +57,9 @@ var insertMarkers = function (elem) {
|
||||
.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('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'compositionStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
@@ -68,9 +68,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'compositionEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@@ -78,10 +78,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'aggregationStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
@@ -90,9 +89,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'aggregationEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@@ -100,9 +99,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
|
||||
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'dependencyStart')
|
||||
.attr('class', 'extension')
|
||||
.attr('refX', 0)
|
||||
@@ -111,9 +110,9 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
|
||||
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z')
|
||||
|
||||
elem.append('defs').append('marker')
|
||||
elem.append('defs').append('marker')
|
||||
.attr('id', 'dependencyEnd')
|
||||
.attr('refX', 19)
|
||||
.attr('refY', 7)
|
||||
@@ -121,302 +120,293 @@ var insertMarkers = function (elem) {
|
||||
.attr('markerHeight', 28)
|
||||
.attr('orient', 'auto')
|
||||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
|
||||
};
|
||||
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z')
|
||||
}
|
||||
|
||||
var edgeCount = 0;
|
||||
var edgeCount = 0
|
||||
var drawEdge = function (elem, path, relation) {
|
||||
var getRelationType = function (type) {
|
||||
switch (type) {
|
||||
case cDDb.relationType.AGGREGATION:
|
||||
return 'aggregation';
|
||||
case cDDb.relationType.EXTENSION:
|
||||
return 'extension';
|
||||
case cDDb.relationType.COMPOSITION:
|
||||
return 'composition';
|
||||
case cDDb.relationType.DEPENDENCY:
|
||||
return 'dependency';
|
||||
}
|
||||
};
|
||||
var getRelationType = function (type) {
|
||||
switch (type) {
|
||||
case cDDb.relationType.AGGREGATION:
|
||||
return 'aggregation'
|
||||
case cDDb.relationType.EXTENSION:
|
||||
return 'extension'
|
||||
case cDDb.relationType.COMPOSITION:
|
||||
return 'composition'
|
||||
case cDDb.relationType.DEPENDENCY:
|
||||
return 'dependency'
|
||||
}
|
||||
}
|
||||
|
||||
// The data for our line
|
||||
var lineData = path.points
|
||||
|
||||
//The data for our line
|
||||
var lineData = path.points;
|
||||
|
||||
//This is the accessor function we talked about above
|
||||
var lineFunction = d3.svg.line()
|
||||
// This is the accessor function we talked about above
|
||||
var lineFunction = d3.svg.line()
|
||||
.x(function (d) {
|
||||
return d.x;
|
||||
return d.x
|
||||
})
|
||||
.y(function (d) {
|
||||
return d.y;
|
||||
return d.y
|
||||
})
|
||||
//.interpolate('cardinal');
|
||||
.interpolate('basis');
|
||||
// .interpolate('cardinal');
|
||||
.interpolate('basis')
|
||||
|
||||
var svgPath = elem.append('path')
|
||||
var svgPath = elem.append('path')
|
||||
.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;
|
||||
url = url.replace(/\(/g,'\\(');
|
||||
url = url.replace(/\)/g,'\\)');
|
||||
}
|
||||
.attr('class', 'relation')
|
||||
var url = ''
|
||||
if (conf.arrowMarkerAbsolute) {
|
||||
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search
|
||||
url = url.replace(/\(/g, '\\(')
|
||||
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' + ')');
|
||||
}
|
||||
if (relation.relation.type2 !== 'none') {
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
|
||||
}
|
||||
// console.log(relation.relation.type1);
|
||||
if (relation.relation.type1 !== 'none') {
|
||||
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')')
|
||||
}
|
||||
if (relation.relation.type2 !== 'none') {
|
||||
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) {
|
||||
var p1 = path.points[Math.floor(l / 2)];
|
||||
var p2 = path.points[Math.ceil(l / 2)];
|
||||
x = (p1.x + p2.x) / 2;
|
||||
y = (p1.y + p2.y) / 2;
|
||||
}
|
||||
else {
|
||||
var p = path.points[Math.floor(l / 2)];
|
||||
x = p.x;
|
||||
y = p.y;
|
||||
}
|
||||
// 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) {
|
||||
var p1 = path.points[Math.floor(l / 2)]
|
||||
var p2 = path.points[Math.ceil(l / 2)]
|
||||
x = (p1.x + p2.x) / 2
|
||||
y = (p1.y + p2.y) / 2
|
||||
} else {
|
||||
var p = path.points[Math.floor(l / 2)]
|
||||
x = p.x
|
||||
y = p.y
|
||||
}
|
||||
|
||||
if (typeof relation.title !== 'undefined') {
|
||||
var g = elem.append('g').
|
||||
attr('class','classLabel');
|
||||
var label = g.append('text')
|
||||
if (typeof relation.title !== 'undefined') {
|
||||
var g = elem.append('g')
|
||||
.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);
|
||||
.text(relation.title)
|
||||
|
||||
window.label = label;
|
||||
var bounds = label.node().getBBox();
|
||||
window.label = label
|
||||
var bounds = label.node().getBBox()
|
||||
|
||||
g.insert('rect', ':first-child')
|
||||
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('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%')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
edgeCount++;
|
||||
edgeCount++
|
||||
}
|
||||
|
||||
var drawClass = function (elem, classDef) {
|
||||
log.info('Rendering class ' + classDef);
|
||||
log.info('Rendering class ' + classDef)
|
||||
|
||||
var addTspan = function (textEl, txt, isFirst) {
|
||||
var tSpan = textEl.append('tspan')
|
||||
var addTspan = function (textEl, txt, isFirst) {
|
||||
var tSpan = textEl.append('tspan')
|
||||
.attr('x', conf.padding)
|
||||
.text(txt);
|
||||
if (!isFirst) {
|
||||
tSpan.attr('dy', conf.textHeight);
|
||||
}
|
||||
};
|
||||
.text(txt)
|
||||
if (!isFirst) {
|
||||
tSpan.attr('dy', conf.textHeight)
|
||||
}
|
||||
}
|
||||
|
||||
var id = 'classId' + classCnt;
|
||||
var classInfo = {
|
||||
id: id,
|
||||
label: classDef.id,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
var id = 'classId' + classCnt
|
||||
var classInfo = {
|
||||
id: id,
|
||||
label: classDef.id,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
var g = elem.append('g')
|
||||
var g = elem.append('g')
|
||||
.attr('id', id)
|
||||
.attr('class', 'classGroup');
|
||||
var title = g.append('text')
|
||||
.attr('class', 'classGroup')
|
||||
var title = g.append('text')
|
||||
.attr('x', conf.padding)
|
||||
.attr('y', conf.textHeight + conf.padding)
|
||||
.text(classDef.id);
|
||||
.text(classDef.id)
|
||||
|
||||
var titleHeight = title.node().getBBox().height;
|
||||
var titleHeight = title.node().getBBox().height
|
||||
|
||||
var membersLine = g.append('line') // text label for the x axis
|
||||
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('y2', conf.padding + titleHeight + conf.dividerMargin / 2)
|
||||
|
||||
var members = g.append('text') // text label for the x axis
|
||||
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('class', 'classText')
|
||||
|
||||
var isFirst = true;
|
||||
var isFirst = true
|
||||
|
||||
classDef.members.forEach(function(member){
|
||||
addTspan(members, member, isFirst);
|
||||
isFirst = false;
|
||||
});
|
||||
//for (var member of classDef.members) {
|
||||
classDef.members.forEach(function (member) {
|
||||
addTspan(members, member, isFirst)
|
||||
isFirst = false
|
||||
})
|
||||
// for (var member of classDef.members) {
|
||||
// addTspan(members, member, isFirst);
|
||||
// isFirst = false;
|
||||
//}
|
||||
// }
|
||||
|
||||
var membersBox = members.node().getBBox();
|
||||
var membersBox = members.node().getBBox()
|
||||
|
||||
var methodsLine = g.append('line') // text label for the x axis
|
||||
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('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height)
|
||||
|
||||
|
||||
var methods = g.append('text') // text label for the x axis
|
||||
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('class', 'classText')
|
||||
|
||||
isFirst = true;
|
||||
isFirst = true
|
||||
|
||||
classDef.methods.forEach(function(method){
|
||||
addTspan(methods, method, isFirst);
|
||||
isFirst = false;
|
||||
});
|
||||
//for (var method of classDef.methods) {
|
||||
classDef.methods.forEach(function (method) {
|
||||
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')
|
||||
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('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)
|
||||
|
||||
membersLine.attr('x2', classBox.width + 2 * conf.padding);
|
||||
methodsLine.attr('x2', classBox.width + 2 * conf.padding);
|
||||
|
||||
|
||||
classInfo.width = classBox.width + 2 * conf.padding;
|
||||
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
|
||||
|
||||
idCache[id] = classInfo;
|
||||
classCnt++;
|
||||
return classInfo;
|
||||
};
|
||||
classInfo.width = classBox.width + 2 * conf.padding
|
||||
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin
|
||||
|
||||
idCache[id] = classInfo
|
||||
classCnt++
|
||||
return classInfo
|
||||
}
|
||||
|
||||
module.exports.setConf = function (cnf) {
|
||||
var keys = Object.keys(cnf);
|
||||
var keys = Object.keys(cnf)
|
||||
|
||||
keys.forEach(function (key) {
|
||||
conf[key] = cnf[key];
|
||||
});
|
||||
};
|
||||
keys.forEach(function (key) {
|
||||
conf[key] = cnf[key]
|
||||
})
|
||||
}
|
||||
/**
|
||||
* Draws a flowchart in the tag with id: id based on the graph definition in text.
|
||||
* @param text
|
||||
* @param id
|
||||
*/
|
||||
module.exports.draw = function (text, id) {
|
||||
cd.yy.clear();
|
||||
cd.parse(text);
|
||||
cd.yy.clear()
|
||||
cd.parse(text)
|
||||
|
||||
log.info('Rendering diagram ' + text);
|
||||
log.info('Rendering diagram ' + text)
|
||||
|
||||
|
||||
//// Fetch the default direction, use TD if none was found
|
||||
var diagram = d3.select('#' + id);
|
||||
insertMarkers(diagram);
|
||||
//var svg = diagram.append('svg');
|
||||
/// / 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
|
||||
var g = new dagre.graphlib.Graph({
|
||||
multigraph: true
|
||||
});
|
||||
var g = new dagre.graphlib.Graph({
|
||||
multigraph: true
|
||||
})
|
||||
|
||||
// Set an object for the graph label
|
||||
g.setGraph({
|
||||
isMultiGraph: true
|
||||
});
|
||||
g.setGraph({
|
||||
isMultiGraph: true
|
||||
})
|
||||
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
g.setDefaultEdgeLabel(function () {
|
||||
return {};
|
||||
});
|
||||
g.setDefaultEdgeLabel(function () {
|
||||
return {}
|
||||
})
|
||||
|
||||
var classes = cDDb.getClasses();
|
||||
var keys = Object.keys(classes);
|
||||
var i;
|
||||
for (i=0;i<keys.length;i++) {
|
||||
var classDef = classes[keys[i]];
|
||||
var node = drawClass(diagram, classDef);
|
||||
var classes = cDDb.getClasses()
|
||||
var keys = Object.keys(classes)
|
||||
var i
|
||||
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.
|
||||
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 });
|
||||
}
|
||||
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});
|
||||
});
|
||||
//for (var relation of relations) {
|
||||
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})
|
||||
})
|
||||
// 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) {
|
||||
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
|
||||
drawEdge(diagram, g.edge(e), g.edge(e).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) {
|
||||
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)))
|
||||
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));
|
||||
diagram.attr('height', '100%')
|
||||
diagram.attr('width', '100%')
|
||||
diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20))
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//if(conf.useMaxWidth) {
|
||||
// if(conf.useMaxWidth) {
|
||||
// diagram.attr('height', '100%');
|
||||
// diagram.attr('width', '100%');
|
||||
// diagram.attr('style', 'max-width:' + (width) + 'px;');
|
||||
//}else{
|
||||
// }else{
|
||||
// diagram.attr('height',height);
|
||||
// diagram.attr('width', width );
|
||||
//}
|
||||
//diagram.attr('viewBox', (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
|
||||
};
|
||||
// }
|
||||
// diagram.attr('viewBox', (box.startx-conf.diagramMarginX) + ' -' +conf.diagramMarginY + ' ' + width + ' ' + height);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user