Simple rendering of class diagrams

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "chalk": "^0.5.1",
     "d3": "~3.5.6",
+    "dagre": "^0.7.4",
     "dagre-d3": "~0.4.8",
     "he": "^0.5.0",
     "minimist": "^1.1.0",

src/diagrams/classDiagram/classDb.js

@@ -36,7 +36,7 @@ module.exports.getClasses = function (id) {
     return classes;
 };
 
-module.exports.getRelations = function (id) {
+module.exports.getRelations = function () {
     return relations;
 };
 

src/diagrams/classDiagram/classRenderer.js

@@ -7,22 +7,44 @@ var cDDb = require('./classDb');
 cd.yy = cDDb;
 var d3 = require('../../d3');
 import * as Logger from '../../logger';
+import * as dagre from 'dagre';
 var log = new Logger.Log();
 
-
+let idCache = new Map();
+let classCnt = 0;
 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){
+    log.info('Rendering class '+classDef);
     //var rect = svgDraw.getNoteRect();
     //rect.x = startx;
     //rect.y = verticalPos;
@@ -59,12 +81,37 @@ var drawClass = function(elem, classDef){
     //
     //rectElem.attr('height',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
-        .style('text-anchor', 'middle')
+        .attr('x', '10')
+        .attr('y', '17')
+        .attr('fill', 'white')
         .attr('class', 'classText')
         .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.parse(text);
 
+    log.info('Rendering diagram '+text);
+
+
     //// Fetch the default direction, use TD if none was found
     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();
     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%');
     //
     //
     //

src/mermaidAPI.js

@@ -28,6 +28,9 @@ var infoDb = require('./diagrams/example/exampleDb');
 var gantt       = require('./diagrams/gantt/ganttRenderer');
 var ganttParser = require('./diagrams/gantt/parser/gantt');
 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');
 
 /**
@@ -259,6 +262,10 @@ var parse = function(text){
             parser = ganttParser;
             parser.parser.yy = ganttDb;
             break;
+        case 'classDiagram':
+            parser = classParser;
+            parser.parser.yy = classDb;
+            break;
     }
 
     try{
@@ -408,6 +415,13 @@ var render = function(id, txt, cb, container){
                 utils.cloneCssStyles(element.firstChild, []);
             }
             break;
+        case 'classDiagram':
+            classRenderer.setConf(config.gantt);
+            classRenderer.draw(txt,id);
+            if(config.cloneCssStyles) {
+                utils.cloneCssStyles(element.firstChild, []);
+            }
+            break;
         case 'info':
             info.draw(txt,id,exports.version());
             if(config.cloneCssStyles) {

src/utils.js

@@ -42,6 +42,11 @@ var detectType = function(text){
         return 'gantt';
     }
 
+    if(text.match(/^\s*classDiagram/)) {
+        log.debug('Detected classDiagram syntax');
+        return 'classDiagram';
+    }
+
     return 'graph';
 };
 export {detectType};