Merge branch 'master' of github.com:mermaid-js/mermaid

src/diagrams/class/classDb.js

@@ -317,6 +317,12 @@ const setupToolTips = function (element) {
 };
 funs.push(setupToolTips);
 
+let direction = 'TB';
+const getDirection = () => direction;
+const setDirection = (dir) => {
+  direction = dir;
+};
+
 export default {
   parseDirective,
   getConfig: () => configApi.getConfig().class,
@@ -328,6 +334,8 @@ export default {
   addAnnotation,
   getRelations,
   addRelation,
+  getDirection,
+  setDirection,
   addMember,
   addMembers,
   cleanupLabel,

src/diagrams/class/classRenderer-v2.js

@@ -207,7 +207,7 @@ export const addRelations = function (relations, g) {
       edgeData.arrowheadStyle = 'fill: #333';
       edgeData.labelpos = 'c';
 
-      if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
+      if (getConfig().flowchart.htmlLabels) { // eslint-disable-line
         edgeData.labelType = 'html';
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
@@ -359,7 +359,7 @@ export const draw = function (text, id) {
   // }
 
   // Fetch the default direction, use TD if none was found
-  let dir = 'TD';
+  //let dir = 'TD';
 
   const conf = getConfig().flowchart;
   log.info('config:', conf);
@@ -372,7 +372,7 @@ export const draw = function (text, id) {
     compound: true,
   })
     .setGraph({
-      rankdir: dir,
+      rankdir: classDb.getDirection(),
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
@@ -457,7 +457,7 @@ export const draw = function (text, id) {
       rect.setAttribute('ry', 0);
       rect.setAttribute('width', dim.width);
       rect.setAttribute('height', dim.height);
-      rect.setAttribute('style', 'fill:#e8e8e8;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');
 
       label.insertBefore(rect, label.firstChild);
     }

src/diagrams/class/parser/classDiagram.jison

@@ -19,6 +19,10 @@
 
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+.*direction\s+TB[^\n]*                                          return 'direction_tb';
+.*direction\s+BT[^\n]*                                          return 'direction_bt';
+.*direction\s+RL[^\n]*                                          return 'direction_rl';
+.*direction\s+LR[^\n]*                                          return 'direction_lr';
 <open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
@@ -180,9 +184,21 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 start
     : mermaidDoc
+    | direction
     | directive start
     ;
 
+direction
+    : direction_tb
+    { yy.setDirection('TB');}
+    | direction_bt
+    { yy.setDirection('BT');}
+    | direction_rl
+    { yy.setDirection('RL');}
+    | direction_lr
+    { yy.setDirection('LR');}
+    ;
+
 mermaidDoc
     : graphConfig
     ;
@@ -235,6 +251,7 @@ statement
     | clickStatement
     | cssClassStatement
     | directive
+    | direction
     ;
 
 classStatement

src/diagrams/class/styles.js

@@ -12,6 +12,19 @@ const getStyles = (options) =>
 
 }
 
+.nodeLabel, .edgeLabel {
+  color: ${options.classText};
+}
+.edgeLabel .label rect {
+  fill: ${options.mainBkg};
+}
+.label text {
+  fill: ${options.classText};
+}
+.edgeLabel .label span {
+  background: ${options.mainBkg};
+}
+
 .classTitle {
   font-weight: bolder;
 }

src/diagrams/flowchart/styles.js

@@ -38,7 +38,7 @@ const getStyles = (options) =>
 
   .edgePath .path {
     stroke: ${options.lineColor};
-    stroke-width: 1.5px;
+    stroke-width: 2.0px;
   }
 
   .flowchart-link {

src/diagrams/pie/pieRenderer.js

@@ -1,7 +1,7 @@
 /**
  * Created by AshishJ on 11-09-2019.
  */
-import { select, scaleOrdinal, pie as d3pie, entries, arc } from 'd3';
+import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import pieData from './pieDb';
 import pieParser from './parser/pie';
 import { log } from '../../logger';
@@ -81,13 +81,13 @@ export const draw = (txt, id) => {
     ];
 
     // Set the color scale
-    var color = scaleOrdinal().domain(data).range(myGeneratedColors);
+    var color = scaleOrdinal().range(myGeneratedColors);
 
     // Compute the position of each group on the pie:
     var pie = d3pie().value(function (d) {
-      return d.value;
+      return d[1];
     });
-    var dataReady = pie(entries(data));
+    var dataReady = pie(Object.entries(data));
 
     // Shape helper to build arcs:
     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
@@ -100,7 +100,7 @@ export const draw = (txt, id) => {
       .append('path')
       .attr('d', arcGenerator)
       .attr('fill', function (d) {
-        return color(d.data.key);
+        return color(d.data[0]);
       })
       .attr('class', 'pieCircle');
 
@@ -108,11 +108,11 @@ export const draw = (txt, id) => {
     // Use the centroid method to get the best coordinates.
     svg
       .selectAll('mySlices')
-      .data(dataReady.filter((value) => value.data.value !== 0))
+      .data(dataReady)
       .enter()
       .append('text')
       .text(function (d) {
-        return ((d.data.value / sum) * 100).toFixed(0) + '%';
+        return ((d.data[1] / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
         return 'translate(' + arcGenerator.centroid(d) + ')';
@@ -150,15 +150,15 @@ export const draw = (txt, id) => {
       .style('stroke', color);
 
     legend
-      .data(dataReady.filter((value) => value.data.value !== 0))
+      .data(dataReady)
       .append('text')
       .attr('x', legendRectSize + legendSpacing)
       .attr('y', legendRectSize - legendSpacing)
       .text(function (d) {
         if (parser.yy.getShowData() || conf.showData || conf.pie.showData) {
-          return d.data.key + ' [' + d.data.value + ']';
+          return d.data[0] + ' [' + d.data[1] + ']';
         } else {
-          return d.data.key;
+          return d.data[0];
         }
       });
   } catch (e) {