Merge branch 'develop' into feature/field-classifier

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

@@ -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;
 }