Rendering of class diagrams with methods and members represented

src/diagrams/classDiagram/classDb.js

@@ -23,7 +23,8 @@ exports.addClass = function (id) {
     if(typeof classes.get(id) === 'undefined'){
         classes.set(id, {
             id:id,
-            methods:[]
+            methods:[],
+            members:[]
         });
     }
 };
@@ -53,6 +54,16 @@ exports.addRelation = function (relation) {
 };
 
 exports.addMembers = function (className, MembersArr) {
+    var theClass = classes.get(className);
+    if(typeof MembersArr === 'string'){
+        if(MembersArr.substr(-1) === ')'){
+            theClass.methods.push(MembersArr.substr(2));
+        }
+        else{
+            theClass.members.push(MembersArr.substr(2));
+        }
+    }
+    //console.warn('MembersArr:'+MembersArr);
 };
 
 exports.lineType = {

src/diagrams/classDiagram/classRenderer.js

@@ -16,7 +16,9 @@ if(typeof Map !== 'undefined'){
 }
 let classCnt = 0;
 var conf = {
-
+    dividerMargin:10,
+    padding:5 ,
+    textHeight:15
 };
 
 // Todo optimize
@@ -37,7 +39,8 @@ var drawEdge = function(elem, path) {
     var lineFunction = d3.svg.line()
     .x(function(d) { return d.x; })
     .y(function(d) { return d.y; })
-    .interpolate('cardinal');
+    //.interpolate('cardinal');
+    .interpolate('basis');
 
     elem.append('path')
     .attr('d', lineFunction(lineData))
@@ -48,42 +51,16 @@ var drawEdge = function(elem, path) {
 
 var drawClass = function(elem, classDef){
     log.info('Rendering class '+classDef);
-    //var rect = svgDraw.getNoteRect();
+
-    //rect.x = startx;
+    var addTspan = function(textEl, txt,isFirst){
-    //rect.y = verticalPos;
+        var tSpan = textEl.append('tspan')
-    //rect.width = conf.width;
+            .attr('x',conf.padding)
-    //rect.class = 'note';
+            .text(txt);
-    //
+        if(!isFirst){
-    //var g = elem.append('g');
+            tSpan.attr('dy',15);
-    //var rectElem = svgDraw.drawRect(g, rect);
+        }
-    //
+    };
-    //var textObj = svgDraw.getTextObj();
+
-    //textObj.x = startx-4;
-    //textObj.y = verticalPos-13;
-    //textObj.textMargin = conf.noteMargin;
-    //textObj.dy = '1em';
-    //textObj.text = msg.message;
-    //textObj.class = 'noteText';
-    //
-    //var textElem = svgDraw.drawText(g,textObj, conf.width-conf.noteMargin);
-    //
-    //var textHeight = textElem[0][0].getBBox().height;
-    //if(textHeight > conf.width){
-    //    textElem.remove();
-    //    g = elem.append('g');
-    //
-    //    //textObj.x = textObj.x - conf.width;
-    //    //textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
-    //    textElem = svgDraw.drawText(g,textObj, 2*conf.width-conf.noteMargin);
-    //    textHeight = textElem[0][0].getBBox().height;
-    //    rectElem.attr('width',2*conf.width);
-    //    exports.bounds.insert(startx, verticalPos, startx + 2*conf.width,  verticalPos + 2*conf.noteMargin + textHeight);
-    //}else{
-    //    exports.bounds.insert(startx, verticalPos, startx + conf.width,  verticalPos + 2*conf.noteMargin + textHeight);
-    //}
-    //
-    //rectElem.attr('height',textHeight+ 2*conf.noteMargin);
-    //exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
     let id = 'classId'+classCnt;
     let classInfo = {
         id:id,
@@ -94,23 +71,75 @@ var drawClass = function(elem, classDef){
 
     var g = elem.append('g')
         .attr('id',id);
-    var textElem = g.append('text')      // text label for the x axis
+    var title = g.append('text')      // text label for the x axis
-        .attr('x', '10')
+        .attr('x', conf.padding)
-        .attr('y', '17')
+        .attr('y', conf.textHeight+conf.padding)
         .attr('fill', 'white')
         .attr('class', 'classText')
         .text(classDef.id);
-    var box = textElem.node().getBBox();
 
+    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('fill', 'white')
+        .attr('class', 'classText')
+        .attr('style','stroke:rgb(255,255,255);stroke-width:1');
+
+    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');
+
+    let isFirst = true;
+    for(let member of classDef.members){
+        addTspan(members,member, isFirst);
+        isFirst = false;
+    }
+
+    //console.warn(JSON.stringify(classDef));
+
+    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('fill', 'white')
+        .attr('class', 'classText')
+        .attr('style','stroke:rgb(255,255,255);stroke-width:1');
+
+
+    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');
+
+    isFirst = true;
+    for(let 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('fill','darkgrey')
-        .attr('width',box.width+20)
+        .attr('width',  classBox.width+2*conf.padding)
-        .attr('height',box.height+10);
+        .attr('height', classBox.height+conf.padding+0.5*conf.dividerMargin);
 
-    classInfo.width = box.width+20;
+
-    classInfo.height = box.height+10;
+    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.set(id,classInfo);
     classCnt++;
@@ -153,7 +182,7 @@ module.exports.draw = function (text, id) {
 
     let classes = cDDb.getClasses();
     for(let classDef of classes.values()){
-        let node = drawClass(diagram, 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.

src/diagrams/classDiagram/parser/classDiagram.jison

@@ -155,8 +155,8 @@ members
 
 methodStatement
     : className {/*console.log('Rel found',$1);*/}
-    | className LABEL
+    | className LABEL {yy.addMembers($1,$2);}
-    | MEMBER
+    | MEMBER {console.warn('Member',$1);}
     | SEPARATOR {/*console.log('sep found',$1);*/}
     ;
 

src/diagrams/classDiagram/parser/classDiagram.js

@@ -107,6 +107,12 @@ break;
 case 15:
 /*console.log('Rel found',$$[$0]);*/
 break;
+case 16:
+yy.addMembers($$[$0-1],$$[$0]);
+break;
+case 17:
+console.warn('Member',$$[$0]);
+break;
 case 18:
 /*console.log('sep found',$$[$0]);*/
 break;