Labels for relations between classes in classdiagrams

src/diagrams/classDiagram/classDb.js

@@ -56,15 +56,26 @@ exports.addMembers = function (className, MembersArr) {
     var theClass = classes.get(className);
     if(typeof MembersArr === 'string'){
         if(MembersArr.substr(-1) === ')'){
-            theClass.methods.push(MembersArr.substr(2));
+            theClass.methods.push(MembersArr);
         }
         else{
-            theClass.members.push(MembersArr.substr(2));
+            theClass.members.push(MembersArr);
         }
     }
     //console.warn('MembersArr:'+MembersArr);
 };
 
+exports.cleanupLabel = function (label) {
+
+    if(label.substring(0,1) === ':'){
+        //console.warn('Fixing label:'+label.substr(2).trim());
+        return label.substr(2).trim();
+    }
+    else{
+        return label.trim();
+    }
+};
+
 exports.lineType = {
     LINE:0,
     DOTTED_LINE:1

src/diagrams/classDiagram/classRenderer.js

@@ -122,6 +122,7 @@ var insertMarkers = function (elem) {
         .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
 
+var edgeCount = 0;
 var drawEdge = function (elem, path, relation) {
     var getRelationType = function (type) {
         //console.warn(type);
@@ -154,7 +155,9 @@ var drawEdge = function (elem, path, relation) {
 
     var svgPath = elem.append('path')
         .attr('d', lineFunction(lineData))
+        .attr('id', 'edge' + edgeCount)
         .attr('class', 'relation');
+
     var url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search;
     url = url.replace(/\(/g, '\\(');
     url = url.replace(/\)/g, '\\)');
@@ -166,6 +169,55 @@ var drawEdge = function (elem, path, relation) {
     if (relation.relation.type2 !== 'none') {
         svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
     }
+
+    console.warn(path);
+
+    //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')
+            .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();
+        console.log(bounds);
+
+        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%')
+
+    }
+
+    edgeCount++;
 }
 
 var drawClass = function (elem, classDef) {
@@ -283,10 +335,14 @@ module.exports.draw = function (text, id) {
     //var svg = diagram.append('svg');
 
     // Layout graph, Create a new directed graph
-    var g = new dagre.graphlib.Graph();
+    var g = new dagre.graphlib.Graph({
+        multigraph: true
+    });
 
     // Set an object for the graph label
-    g.setGraph({});
+    g.setGraph({
+        isMultiGraph: true
+    });
 
     // Default to assigning a new object as a label for each new edge.
     g.setDefaultEdgeLabel(function () {
@@ -309,8 +365,9 @@ module.exports.draw = function (text, id) {
     }
 
     let relations = cDDb.getRelations();
+    var i = 0;
     for (let relation of relations) {
-
+        i = i + 1;
         g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation});
     }
     dagre.layout(g);

src/diagrams/classDiagram/parser/classDiagram.jison

@@ -138,7 +138,7 @@ className
 
 statement
     : relationStatement       { yy.addRelation($1); }
-    | relationStatement LABEL { $1.title = $2; yy.addRelation($1);        }
+    | relationStatement LABEL { $1.title =  yy.cleanupLabel($2); yy.addRelation($1);        }
     | classStatement
     | methodStatement
     ;
@@ -155,7 +155,7 @@ members
 
 methodStatement
     : className {/*console.log('Rel found',$1);*/}
-    | className LABEL {yy.addMembers($1,$2);}
+    | className LABEL {yy.addMembers($1,yy.cleanupLabel($2));}
     | MEMBER {console.warn('Member',$1);}
     | SEPARATOR {/*console.log('sep found',$1);*/}
     ;

src/diagrams/classDiagram/parser/classDiagram.js

@@ -93,7 +93,7 @@ case 7:
  yy.addRelation($$[$0]); 
 break;
 case 8:
- $$[$0-1].title = $$[$0]; yy.addRelation($$[$0-1]);        
+ $$[$0-1].title =  yy.cleanupLabel($$[$0]); yy.addRelation($$[$0-1]);        
 break;
 case 12:
 /*console.log($$[$0-3],JSON.stringify($$[$0-1]));*/yy.addMembers($$[$0-3],$$[$0-1]);
@@ -108,7 +108,7 @@ case 15:
 /*console.log('Rel found',$$[$0]);*/
 break;
 case 16:
-yy.addMembers($$[$0-1],$$[$0]);
+yy.addMembers($$[$0-1],yy.cleanupLabel($$[$0]));
 break;
 case 17:
 console.warn('Member',$$[$0]);

src/less/forest/classDiagram.less

@@ -15,6 +15,17 @@ g.classGroup line {
   stroke-width:1;
 }
 
+svg .classLabel .box {
+  stroke: none;
+  stroke-width:0;
+  fill: @nodeBkg;
+  opacity: 0.5;
+}
+
+svg .classLabel .label {
+  fill: @nodeBorder;
+}
+
 .relation {
   stroke: @nodeBorder;
   stroke-width: 1;