Added extension markers for classDiagrams

Added styling (forest) for classDiagrams

src/diagrams/classDiagram/classRenderer.js

@@ -18,7 +18,7 @@ let classCnt = 0;
 var conf = {
     dividerMargin: 10,
     padding: 5,
-    textHeight:15
+    textHeight: 14
 };
 
 // Todo optimize
@@ -31,22 +31,63 @@ var getGraphId = function(label){
     return undefined;
 }
 
-var drawEdge = function(elem, path) {
+
+/**
+ * Setup arrow head and define the marker. The result is appended to the svg.
+ */
+var insertMarkers = function (elem) {
+    elem.append('defs').append('marker')
+        .attr('id', 'extensionStart')
+        .attr('class', 'extension')
+        .attr('refX', 0)
+        .attr('refY', 7)
+        .attr('markerWidth', 190)
+        .attr('markerHeight', 240)
+        .attr('orient', 'auto')
+        .append('path')
+        .attr('fill', 'white')
+        .attr('stroke', 'black')
+        .attr('stroke-width', 1)
+        .attr('d', 'M 1,7 L18,13 V 1 Z');
+
+    elem.append('defs').append('marker')
+        .attr('id', 'extensionEnd')
+        .attr('refX', 19)
+        .attr('refY', 7)
+        .attr('markerWidth', 20)
+        .attr('markerHeight', 28)
+        .attr('orient', 'auto')
+        .append('path')
+        .attr('fill', 'white')
+        .attr('stroke', 'black')
+        .attr('stroke-width', 1)
+        .attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
+};
+
+var drawEdge = function (elem, path, relation) {
     //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; })
+        .x(function (d) {
+            return d.x;
+        })
+        .y(function (d) {
+            return d.y;
+        })
         //.interpolate('cardinal');
         .interpolate('basis');
 
-    elem.append('path')
+    var path = elem.append('path')
         .attr('d', lineFunction(lineData))
-    .attr('stroke', 'black')
-    .attr('stroke-width', 1)
-    .attr('fill', 'none');
+        .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, '\\)');
+
+    path.attr('marker-end', 'url(' + url + '#extensionEnd)');
+    path.attr('marker-start', 'url(' + url + '#extensionStart)');
 }
 
 var drawClass = function (elem, classDef) {
@@ -57,7 +98,7 @@ var drawClass = function(elem, classDef){
             .attr('x', conf.padding)
             .text(txt);
         if (!isFirst) {
-            tSpan.attr('dy',15);
+            tSpan.attr('dy', conf.textHeight);
         }
     };
 
@@ -70,12 +111,11 @@ var drawClass = function(elem, classDef){
     };
 
     var g = elem.append('g')
-        .attr('id',id);
-    var title = g.append('text')      // text label for the x axis
+        .attr('id', id)
+        .attr('class', 'classGroup');
+    var title = g.append('text')
         .attr('x', conf.padding)
         .attr('y', conf.textHeight + conf.padding)
-        .attr('fill', 'white')
-        .attr('class', 'classText')
         .text(classDef.id);
 
     var titleHeight = title.node().getBBox().height;
@@ -83,10 +123,7 @@ var drawClass = function(elem, classDef){
     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');
+        .attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2);
 
     var members = g.append('text')      // text label for the x axis
         .attr('x', conf.padding)
@@ -107,10 +144,7 @@ var drawClass = function(elem, classDef){
     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');
+        .attr('y2', conf.padding + titleHeight + 3 * conf.dividerMargin / 2 + membersBox.height);
 
 
     var methods = g.append('text')      // text label for the x axis
@@ -129,7 +163,6 @@ var drawClass = function(elem, classDef){
     g.insert('rect', ':first-child')
         .attr('x', 0)
         .attr('y', 0)
-        .attr('fill','darkgrey')
         .attr('width', classBox.width + 2 * conf.padding)
         .attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
 
@@ -147,7 +180,6 @@ var drawClass = function(elem, classDef){
 };
 
 
-
 module.exports.setConf = function (cnf) {
     var keys = Object.keys(cnf);
 
@@ -169,6 +201,7 @@ module.exports.draw = function (text, id) {
 
     //// 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
@@ -178,7 +211,9 @@ module.exports.draw = function (text, id) {
     g.setGraph({});
 
     // Default to assigning a new object as a label for each new edge.
-    g.setDefaultEdgeLabel(function() { return {}; });
+    g.setDefaultEdgeLabel(function () {
+        return {};
+    });
 
     let classes = cDDb.getClasses();
     for (let classDef of classes.values()) {
@@ -209,7 +244,7 @@ module.exports.draw = function (text, id) {
     });
     g.edges().forEach(function (e) {
         log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
-        drawEdge(diagram, g.edge(e))
+        drawEdge(diagram, g.edge(e), e)
     });
 
 

src/less/default/mermaid.less

@@ -6,7 +6,7 @@
 
 text {
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size:28px;
 }
 
 div.mermaidTooltip {

src/less/forest/classDiagram.less

@@ -0,0 +1,22 @@
+g.classGroup text {
+  fill:@nodeBorder;
+  stroke:none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+
+g.classGroup rect {
+  fill:@nodeBkg;
+  stroke: @nodeBorder;
+}
+
+g.classGroup line {
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+
+.relation {
+  stroke: @nodeBorder;
+  stroke-width: 1;
+  fill:none;
+}

src/less/forest/mermaid.less

@@ -2,11 +2,11 @@
 @import "flow";
 @import "sequenceDiagram";
 @import "gantt";
-@import "variables";
+@import "classDiagram";
 
 text {
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size:28px;
 }
 
 div.mermaidTooltip {