Simple rendering of class diagrams
This commit is contained in:
parent
01ddfea478
commit
7a58e8261f
File diff suppressed because it is too large
Load Diff
|
@ -38,6 +38,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chalk": "^0.5.1",
|
"chalk": "^0.5.1",
|
||||||
"d3": "~3.5.6",
|
"d3": "~3.5.6",
|
||||||
|
"dagre": "^0.7.4",
|
||||||
"dagre-d3": "~0.4.8",
|
"dagre-d3": "~0.4.8",
|
||||||
"he": "^0.5.0",
|
"he": "^0.5.0",
|
||||||
"minimist": "^1.1.0",
|
"minimist": "^1.1.0",
|
||||||
|
|
|
@ -36,7 +36,7 @@ module.exports.getClasses = function (id) {
|
||||||
return classes;
|
return classes;
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports.getRelations = function (id) {
|
module.exports.getRelations = function () {
|
||||||
return relations;
|
return relations;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -7,22 +7,44 @@ var cDDb = require('./classDb');
|
||||||
cd.yy = cDDb;
|
cd.yy = cDDb;
|
||||||
var d3 = require('../../d3');
|
var d3 = require('../../d3');
|
||||||
import * as Logger from '../../logger';
|
import * as Logger from '../../logger';
|
||||||
|
import * as dagre from 'dagre';
|
||||||
var log = new Logger.Log();
|
var log = new Logger.Log();
|
||||||
|
|
||||||
|
let idCache = new Map();
|
||||||
|
let classCnt = 0;
|
||||||
var conf = {
|
var conf = {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Todo optimize
|
||||||
|
var getGraphId = function(label){
|
||||||
|
for (var [id, classInfo] of idCache) {
|
||||||
|
if(classInfo.label === label){
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
var drawEdge = function(elem, path) {
|
||||||
|
//The data for our line
|
||||||
|
var lineData = path.points;
|
||||||
|
|
||||||
|
//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('linear');
|
||||||
|
|
||||||
|
elem.append('path')
|
||||||
|
.attr('d', lineFunction(lineData))
|
||||||
|
.attr('stroke', 'black')
|
||||||
|
.attr('stroke-width', 1)
|
||||||
|
.attr('fill', 'none');
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Draws an actor in the diagram with the attaced line
|
|
||||||
* @param center - The center of the the actor
|
|
||||||
* @param pos The position if the actor in the liost of actors
|
|
||||||
* @param description The text in the box
|
|
||||||
*/
|
|
||||||
var drawClass = function(elem, classDef){
|
var drawClass = function(elem, classDef){
|
||||||
|
log.info('Rendering class '+classDef);
|
||||||
//var rect = svgDraw.getNoteRect();
|
//var rect = svgDraw.getNoteRect();
|
||||||
//rect.x = startx;
|
//rect.x = startx;
|
||||||
//rect.y = verticalPos;
|
//rect.y = verticalPos;
|
||||||
|
@ -59,12 +81,37 @@ var drawClass = function(elem, classDef){
|
||||||
//
|
//
|
||||||
//rectElem.attr('height',textHeight+ 2*conf.noteMargin);
|
//rectElem.attr('height',textHeight+ 2*conf.noteMargin);
|
||||||
//exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
|
//exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
|
||||||
var g = elem.append('g');
|
let id = 'classId'+classCnt;
|
||||||
|
let classInfo = {
|
||||||
|
id:id,
|
||||||
|
label:classDef.id,
|
||||||
|
width:0,
|
||||||
|
height:0
|
||||||
|
};
|
||||||
|
|
||||||
|
var g = elem.append('g')
|
||||||
|
.attr('id',id);
|
||||||
var textElem = g.append('text') // text label for the x axis
|
var textElem = g.append('text') // text label for the x axis
|
||||||
.style('text-anchor', 'middle')
|
.attr('x', '10')
|
||||||
|
.attr('y', '17')
|
||||||
|
.attr('fill', 'white')
|
||||||
.attr('class', 'classText')
|
.attr('class', 'classText')
|
||||||
.text(classDef.id);
|
.text(classDef.id);
|
||||||
|
var box = textElem.node().getBBox();
|
||||||
|
|
||||||
|
g.insert('rect',':first-child')
|
||||||
|
.attr('x',0)
|
||||||
|
.attr('y',0)
|
||||||
|
.attr('fill','darkgrey')
|
||||||
|
.attr('width',box.width+20)
|
||||||
|
.attr('height',box.height+10);
|
||||||
|
|
||||||
|
classInfo.width = box.width+20;
|
||||||
|
classInfo.height = box.height+10;
|
||||||
|
|
||||||
|
idCache.set(id,classInfo);
|
||||||
|
classCnt++;
|
||||||
|
return classInfo;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -85,18 +132,58 @@ module.exports.draw = function (text, id) {
|
||||||
cd.yy.clear();
|
cd.yy.clear();
|
||||||
cd.parse(text);
|
cd.parse(text);
|
||||||
|
|
||||||
|
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);
|
var diagram = d3.select('#'+id);
|
||||||
var svg = diagram.append('svg');
|
//var svg = diagram.append('svg');
|
||||||
|
|
||||||
|
// Layout graph, Create a new directed graph
|
||||||
|
var g = new dagre.graphlib.Graph();
|
||||||
|
|
||||||
|
// Set an object for the graph label
|
||||||
|
g.setGraph({});
|
||||||
|
|
||||||
|
// Default to assigning a new object as a label for each new edge.
|
||||||
|
g.setDefaultEdgeLabel(function() { return {}; });
|
||||||
|
|
||||||
let classes = cDDb.getClasses();
|
let classes = cDDb.getClasses();
|
||||||
for(let classDef of classes.values()){
|
for(let classDef of classes.values()){
|
||||||
drawClass(svg, classDef)
|
let 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 });
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
let relations = cDDb.getRelations();
|
||||||
|
for(let relation of relations){
|
||||||
|
|
||||||
|
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
|
||||||
|
}
|
||||||
|
dagre.layout(g);
|
||||||
|
g.nodes().forEach(function(v) {
|
||||||
|
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))
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
diagram.attr('height', '100%');
|
||||||
|
diagram.attr('width', '100%');
|
||||||
//
|
//
|
||||||
//
|
//
|
||||||
//
|
//
|
||||||
|
|
|
@ -28,6 +28,9 @@ var infoDb = require('./diagrams/example/exampleDb');
|
||||||
var gantt = require('./diagrams/gantt/ganttRenderer');
|
var gantt = require('./diagrams/gantt/ganttRenderer');
|
||||||
var ganttParser = require('./diagrams/gantt/parser/gantt');
|
var ganttParser = require('./diagrams/gantt/parser/gantt');
|
||||||
var ganttDb = require('./diagrams/gantt/ganttDb');
|
var ganttDb = require('./diagrams/gantt/ganttDb');
|
||||||
|
var classParser = require('./diagrams/classDiagram/parser/classDiagram');
|
||||||
|
var classRenderer = require('./diagrams/classDiagram/classRenderer');
|
||||||
|
var classDb = require('./diagrams/classDiagram/classDb');
|
||||||
var d3 = require('./d3');
|
var d3 = require('./d3');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -259,6 +262,10 @@ var parse = function(text){
|
||||||
parser = ganttParser;
|
parser = ganttParser;
|
||||||
parser.parser.yy = ganttDb;
|
parser.parser.yy = ganttDb;
|
||||||
break;
|
break;
|
||||||
|
case 'classDiagram':
|
||||||
|
parser = classParser;
|
||||||
|
parser.parser.yy = classDb;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
try{
|
try{
|
||||||
|
@ -408,6 +415,13 @@ var render = function(id, txt, cb, container){
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
case 'classDiagram':
|
||||||
|
classRenderer.setConf(config.gantt);
|
||||||
|
classRenderer.draw(txt,id);
|
||||||
|
if(config.cloneCssStyles) {
|
||||||
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
|
}
|
||||||
|
break;
|
||||||
case 'info':
|
case 'info':
|
||||||
info.draw(txt,id,exports.version());
|
info.draw(txt,id,exports.version());
|
||||||
if(config.cloneCssStyles) {
|
if(config.cloneCssStyles) {
|
||||||
|
|
|
@ -42,6 +42,11 @@ var detectType = function(text){
|
||||||
return 'gantt';
|
return 'gantt';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(text.match(/^\s*classDiagram/)) {
|
||||||
|
log.debug('Detected classDiagram syntax');
|
||||||
|
return 'classDiagram';
|
||||||
|
}
|
||||||
|
|
||||||
return 'graph';
|
return 'graph';
|
||||||
};
|
};
|
||||||
export {detectType};
|
export {detectType};
|
||||||
|
|
Loading…
Reference in New Issue