#1542 Making sure config and directives works for overriding theme variables using initialize call or directives + tests

src/diagrams/class/classDb.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
 import { logger } from '../../logger';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
-const config = getConfig();
+const config = configApi.getConfig();
 
 let relations = [];
 let classes = {};

src/diagrams/er/erDb.js

@@ -3,7 +3,7 @@
  */
 import { logger } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let entities = {};
 let relationships = [];

src/diagrams/flowchart/flowDb.js

@@ -1,13 +1,13 @@
 import { select } from 'd3';
 import utils from '../../utils';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import mermaidAPI from '../../mermaidAPI';
 
 // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = '';
 
-let config = getConfig();
+let config = configApi.defaultConfig;
 let vertices = {};
 let edges = [];
 let classes = [];
@@ -48,7 +48,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
-    config = getConfig();
+    config = configApi.defaultConfig;
     txt = common.sanitizeText(text.trim(), config);
 
     // strip quotes if string starts and ends with a quote
@@ -224,7 +224,7 @@ const setTooltip = function(ids, tooltip) {
 const setClickFun = function(_id, functionName) {
   let id = _id;
   if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.defaultConfig.securityLevel !== 'loose') {
     return;
   }
   if (typeof functionName === 'undefined') {
@@ -622,7 +622,7 @@ const destructLink = (_str, _startStr) => {
 
 export default {
   parseDirective,
-  getConfig: () => configApi.getConfig().flowchart,
+  defaultConfig: () => configApi.defaultConfig.flowchart,
   addVertex,
   addLink,
   updateLinkInterpolate,

src/diagrams/flowchart/styles.js

@@ -48,7 +48,7 @@ const getStyles = options =>
   }
 
   .cluster rect {
-    fill: ${options.secondBkg};
+    fill: ${options.clusterBkg};
     stroke: ${options.clusterBorder};
     stroke-width: 1px;
   }

src/diagrams/gantt/ganttDb.js

@@ -1,7 +1,7 @@
 import moment from 'moment-mini';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { logger } from '../../logger';
-import configApi, { getConfig } from '../../config';
+import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 
@@ -473,7 +473,7 @@ const compileTasks = function() {
  */
 export const setLink = function(ids, _linkStr) {
   let linkStr = _linkStr;
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.getConfig().securityLevel !== 'loose') {
     linkStr = sanitizeUrl(_linkStr);
   }
   ids.split(',').forEach(function(id) {
@@ -502,7 +502,7 @@ export const setClass = function(ids, className) {
 };
 
 const setClickFun = function(id, functionName, functionArgs) {
-  if (getConfig().securityLevel !== 'loose') {
+  if (configApi.getConfig().securityLevel !== 'loose') {
     return;
   }
   if (typeof functionName === 'undefined') {

src/diagrams/pie/pieDb.js

@@ -3,7 +3,7 @@
  */
 import { logger } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let sections = {};
 let title = '';

src/diagrams/sequence/sequenceDb.js

@@ -1,5 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 import common from '../common/common';
 import { logger } from '../../logger';
 

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -1,6 +1,7 @@
 /* eslint-env jasmine */
 import { parser } from './parser/sequenceDiagram';
 import sequenceDb from './sequenceDb';
+import * as configApi from '../../config';
 import renderer from './sequenceRenderer';
 import mermaidAPI from '../../mermaidAPI';
 
@@ -925,7 +926,7 @@ describe('when checking the bounds in a sequenceDiagram', function() {
   });
 });
 
-describe('when rendering a sequenceDiagram', function() {
+describe('when rendering a sequenceDiagram APA', function() {
   beforeAll(() => {
     let conf = {
       diagramMarginX: 50,
@@ -941,14 +942,30 @@ describe('when rendering a sequenceDiagram', function() {
       wrap: false,
       mirrorActors: false
     };
-    mermaidAPI.initialize({ sequence: conf });
+    configApi.setSiteConfig({ logLevel: 5, sequence: conf });
+    // console.warn('Config = ', configApi.getConfig())
   });
   let conf;
   beforeEach(function() {
     mermaidAPI.reset();
+    conf = {
+      diagramMarginX: 50,
+      diagramMarginY: 10,
+      actorMargin: 50,
+      width: 150,
+      // Height of actor boxes
+      height: 65,
+      boxMargin: 10,
+      messageMargin: 40,
+      boxTextMargin: 15,
+      noteMargin: 25,
+      wrap: false,
+      mirrorActors: false
+    };
+    configApi.setSiteConfig({ logLevel: 5, sequence: conf });
     parser.yy = sequenceDb;
     parser.yy.clear();
-    conf = parser.yy.getConfig();
+    // conf = parser.yy.getConfig();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
     it(`
@@ -1093,7 +1110,7 @@ Alice->Bob: Hello Bob, how are you?
 Note over Alice,Bob: Looks
 Note over Bob,Alice: Looks back
 `;
-    mermaidAPI.initialize({logLevel:0})
+    // mermaidAPI.initialize({logLevel:0})
     mermaidAPI.parse(str);
     renderer.draw(str, 'tst');
 
@@ -1221,7 +1238,7 @@ Bob->>Alice: Fine!`;
   });
   it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
     const str = `
-%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
+    %%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrap": true }}}%%
 sequenceDiagram
 Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
 Note left of Alice: Bob thinks
@@ -1232,6 +1249,7 @@ Bob->>Alice: Fine!`;
     const { bounds, models } = renderer.bounds.getBounds();
     const msgs = parser.yy.getMessages();
     const mermaid = mermaidAPI.getConfig();
+    console.log(mermaid)
     expect(bounds.startx).toBe(-(conf.width / 2) - conf.actorMargin / 2);
     expect(bounds.starty).toBe(0);
     expect(mermaid.theme).toBe('dark');

src/diagrams/sequence/sequenceRenderer.js

@@ -4,11 +4,12 @@ import { logger } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
 import sequenceDb from './sequenceDb';
+import * as configApi from '../../config';
 import utils, { assignWithDepth } from '../../utils';
 
 parser.yy = sequenceDb;
 
-const conf = {};
+let conf = {};
 
 export const bounds = {
   data: {
@@ -191,6 +192,7 @@ export const bounds = {
     return this.verticalPos;
   },
   getBounds: function() {
+    console.log('here', this.data);
     return { bounds: this.data, models: this.models };
   }
 };
@@ -242,6 +244,28 @@ const drawNote = function(elem, noteModel) {
   bounds.models.addNote(noteModel);
 };
 
+const messageFont = cnf => {
+  return {
+    fontFamily: cnf.messageFontFamily,
+    fontSize: cnf.messageFontSize,
+    fontWeight: cnf.messageFontWeight
+  };
+};
+const noteFont = cnf => {
+  return {
+    fontFamily: cnf.noteFontFamily,
+    fontSize: cnf.noteFontSize,
+    fontWeight: cnf.noteFontWeight
+  };
+};
+const actorFont = cnf => {
+  return {
+    fontFamily: cnf.actorFontFamily,
+    fontSize: cnf.actorFontSize,
+    fontWeight: cnf.actorFontWeight
+  };
+};
+
 /**
  * Draws a message
  * @param g - the parent of the message element
@@ -251,7 +275,7 @@ const drawMessage = function(g, msgModel) {
   bounds.bumpVerticalPos(10);
   const { startx, stopx, starty, message, type, sequenceIndex, wrap } = msgModel;
   const lines = common.splitBreaks(message).length;
-  let textDims = utils.calculateTextDimensions(message, conf.messageFont());
+  let textDims = utils.calculateTextDimensions(message, messageFont(conf));
   const lineHeight = textDims.height / lines;
   msgModel.height += lineHeight;
 
@@ -457,7 +481,7 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
   let heightAdjust = postMargin;
   if (msg.id && msg.message && loopWidths[msg.id]) {
     let loopWidth = loopWidths[msg.id].width;
-    let textConf = conf.messageFont();
+    let textConf = messageFont(conf);
     msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
     msg.width = loopWidth;
     msg.wrap = true;
@@ -478,6 +502,8 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
  * @param id
  */
 export const draw = function(text, id) {
+  conf = configApi.getConfig().sequence;
+  console.log('there ', conf);
   parser.yy.clear();
   parser.yy.setWrap(conf.wrap);
   parser.parse(text + '\n');
@@ -734,7 +760,7 @@ const getMaxMessageWidthPerActor = function(actors, messages) {
       const isNote = msg.placement !== undefined;
       const isMessage = !isNote;
 
-      const textFont = isNote ? conf.noteFont() : conf.messageFont();
+      const textFont = isNote ? noteFont(conf) : messageFont(conf);
       let wrappedMessage = msg.wrap
         ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
         : msg.message;
@@ -827,10 +853,10 @@ const calculateActorMargins = function(actors, actorToMessageWidth) {
       actor.description = utils.wrapLabel(
         actor.description,
         conf.width - 2 * conf.wrapPadding,
-        conf.actorFont()
+        actorFont(conf)
       );
     }
-    const actDims = utils.calculateTextDimensions(actor.description, conf.actorFont());
+    const actDims = utils.calculateTextDimensions(actor.description, actorFont(conf));
     actor.width = actor.wrap
       ? conf.width
       : Math.max(conf.width, actDims.width + 2 * conf.wrapPadding);
@@ -868,8 +894,8 @@ const buildNoteModel = function(msg, actors) {
   let shouldWrap = msg.wrap && msg.message;
 
   let textDimensions = utils.calculateTextDimensions(
-    shouldWrap ? utils.wrapLabel(msg.message, conf.width, conf.noteFont()) : msg.message,
-    conf.noteFont()
+    shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
+    noteFont(conf)
   );
   let noteModel = {
     width: shouldWrap
@@ -901,13 +927,9 @@ const buildNoteModel = function(msg, actors) {
   } else if (msg.to === msg.from) {
     textDimensions = utils.calculateTextDimensions(
       shouldWrap
-        ? utils.wrapLabel(
-            msg.message,
-            Math.max(conf.width, actors[msg.from].width),
-            conf.noteFont()
-          )
+        ? utils.wrapLabel(msg.message, Math.max(conf.width, actors[msg.from].width), noteFont(conf))
         : msg.message,
-      conf.noteFont()
+      noteFont(conf)
     );
     noteModel.width = shouldWrap
       ? Math.max(conf.width, actors[msg.from].width)
@@ -926,7 +948,7 @@ const buildNoteModel = function(msg, actors) {
     noteModel.message = utils.wrapLabel(
       msg.message,
       noteModel.width - 2 * conf.wrapPadding,
-      conf.noteFont()
+      noteFont(conf)
     );
   }
   logger.debug(
@@ -958,12 +980,12 @@ const buildMessageModel = function(msg, actors) {
   const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
   const allBounds = fromBounds.concat(toBounds);
   const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  const msgDims = utils.calculateTextDimensions(msg.message, conf.messageFont());
+  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
   if (msg.wrap && msg.message) {
     msg.message = utils.wrapLabel(
       msg.message,
       Math.max(boundedWidth + 2 * conf.wrapPadding, conf.width),
-      conf.messageFont()
+      messageFont(conf)
     );
   }
   return {

src/diagrams/state/stateDb.js

@@ -1,7 +1,7 @@
 import { logger } from '../../logger';
 import { generateId } from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 const clone = o => JSON.parse(JSON.stringify(o));
 

src/diagrams/user-journey/journeyDb.js

@@ -1,5 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
-import configApi from '../../config';
+import * as configApi from '../../config';
 
 let title = '';
 let currentSection = '';