Merge branch 'develop' into refactor-sequences

# Conflicts: # dist/mermaid.core.js # dist/mermaid.core.js.map # dist/mermaid.js # dist/mermaid.js.map # dist/mermaid.min.js # dist/mermaid.min.js.map # src/config.js # src/mermaidAPI.js
2020-06-17 06:12:02 -04:00 · 2020-06-17 06:12:02 -04:00 · 5f257119d6
parent 3c72d28511 e6df4f24f4
commit 5f257119d6
16 changed files with 836 additions and 913 deletions
--- a/README.md
+++ b/README.md
@ -214,7 +214,7 @@ pie

 ## Related projects

- [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
+- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)

--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@ -88,7 +88,7 @@ describe('Configuration', () => {
        C -->|Three| F[fa:fa-car Car]
        `,
        {
-          arrowMarkerAbsolute: true
+          logLevel:0, arrowMarkerAbsolute: true,fontFamily: '"Noto Sans SC", sans-serif'
        }
      );

--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@ -422,4 +422,30 @@ context('Sequence diagram', () => {
      );
    });
  });
+  context('directives', () => {
+      it('should overide config with directive settings', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        %%{config: { "mirrorActors": true} }%%
+        Alice->>Bob: I'm short
+        note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
+        Bob->>Alice: Short as well
+      `,
+        { logLevel:0,  sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
+      );
+    });
+      it('should overide config with directive settings', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        %%{config: { "mirrorActors": false} }%%
+        Alice->>Bob: I'm short
+        note left of Alice: config set to mirrorActors: true<br/>directive set to mirrorActors: false
+        Bob->>Alice: Short as well
+      `,
+        { logLevel:0,  sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
+      );
+    });
+  });
 });
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@ -21,6 +21,14 @@
  <body>
    <h1>info below</h1>
      <div class="mermaid" style="width: 50%; height: 20%;">
+      graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart TB
  subgraph 1
    A --> B;
@ -64,13 +72,14 @@ flowchart TB
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: { curve: 'linear', "htmlLabels": false },
+        flowchart: { curve: 'linear',htmlLabels: false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        fontFamily: '"arial", sans-serif',
        curve: 'linear',
-        securityLevel: 'loose'
+        securityLevel: 'loose',
+        htmlLabels: false
      });
      function callback(){alert('It worked');}
    </script>
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@ -6,12 +6,12 @@
    <style>
      body {
        /* font-family: 'Mansalva', cursive;*/
-        font-family: 'Mansalva', cursive;
+        font-family: '"Noto Sans SC", sans-serif';
+      }
+      .mermaid-main-font {
+        font-family: '"Noto Sans SC", sans-serif';
+        /* font-family: var(--mermaid-font-family); */
      }
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
      /* :root {
        --mermaid-font-family: '"trebuchet ms", verdana, arial';
        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
@ -27,7 +27,7 @@
    <script>
      // Notice startOnLoad=false
      // This prevents default handling in mermaid from render before the e2e logic is applied
-      mermaid.initialize({
+      window.mermaidDefault = {
        startOnLoad: false,
        useMaxWidth: true,
        // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
@ -35,7 +35,8 @@
        // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
        // fontFamily: '"Mansalva", cursive',
        fontFamily: '"Noto Sans SC", sans-serif'
-      });
+      };
+      mermaid.initialize(window.mermaidDefault);
    </script>
  </body>
 </html>
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -30,6 +30,11 @@ const contentLoaded = function() {
      div.innerHTML = graphObj.code;
      document.getElementsByTagName('body')[0].appendChild(div);
    }
+
+    if (window.mermaidDefault.fontFamily) {
+      graphObj.mermaid.fontFamily = window.mermaidDefault.fontFamily;
+    }
+
    global.mermaid.initialize(graphObj.mermaid);
    global.mermaid.init();
  }
--- a/dist/mermaid.core.js
+++ b/dist/mermaid.core.js
--- a/dist/mermaid.core.js.map
+++ b/dist/mermaid.core.js.map
--- a/dist/mermaid.js
+++ b/dist/mermaid.js
--- a/dist/mermaid.js.map
+++ b/dist/mermaid.js.map
--- a/dist/mermaid.min.js
+++ b/dist/mermaid.min.js
--- a/dist/mermaid.min.js.map
+++ b/dist/mermaid.min.js.map
--- a/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/src/diagrams/sequence/sequenceDiagram.spec.js
@ -1351,7 +1351,7 @@ describe('when rendering a sequenceDiagram with directives', function() {
    renderer.setConf(conf);
  });

-  it('it should handle one actor, when theme is dark and logLevel is 1', function() {
+  it('it should handle one actor, when theme is dark and logLevel is 1 DX1', function() {
    renderer.bounds.init();
    const str = `
 %%{init: { "theme": "dark", "logLevel": 1 } }%%
--- a/src/mermaid.js
+++ b/src/mermaid.js
@ -31,7 +31,7 @@ import utils from './utils';
 */
 const init = function() {
  const conf = mermaidAPI.getConfig();
-  logger.debug('Starting rendering diagrams');
+  // console.log('Starting rendering diagrams (init) - mermaid.init');
  let nodes;
  if (arguments.length >= 2) {
    /*! sequence config was passed as #1 */
@ -71,11 +71,11 @@ const init = function() {
  logger.debug('Start On Load before: ' + mermaid.startOnLoad);
  if (typeof mermaid.startOnLoad !== 'undefined') {
    logger.debug('Start On Load inner: ' + mermaid.startOnLoad);
-    mermaidAPI.initialize({ startOnLoad: mermaid.startOnLoad });
+    mermaidAPI.setConfig({ startOnLoad: mermaid.startOnLoad });
  }

  if (typeof mermaid.ganttConfig !== 'undefined') {
-    mermaidAPI.initialize({ gantt: mermaid.ganttConfig });
+    mermaidAPI.setConfig({ gantt: mermaid.ganttConfig });
  }

  let txt;
@ -129,6 +129,9 @@ const init = function() {
 };

 const initialize = function(config) {
+  mermaidAPI.reset();
+
+  // console.log('mermaid.initialize1', config);
  if (typeof config.mermaid !== 'undefined') {
    if (typeof config.mermaid.startOnLoad !== 'undefined') {
      mermaid.startOnLoad = config.mermaid.startOnLoad;
@ -137,8 +140,9 @@ const initialize = function(config) {
      mermaid.htmlLabels = config.mermaid.htmlLabels;
    }
  }
+  // console.log('Initializing mermaid 2', config);
  mermaidAPI.initialize(config);
-  logger.debug('Initializing mermaid ');
+  // logger.debug('Initializing mermaid 3', config);
 };

 /**
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@ -556,11 +556,18 @@ const config = {
    fontSize: 12
  }
 };
+config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;

 setLogLevel(config.logLevel);
 setConfig(config);

 function parse(text) {
+  const graphInit = utils.detectInit(text);
+  if (graphInit) {
+    reinitialize(graphInit);
+    logger.debug('Init ', graphInit);
+  }
  const graphType = utils.detectType(text);
  let parser;

@ -687,16 +694,18 @@ export const decodeEntities = function(text) {
 *  });
 *```
 * @param id the id of the element to be rendered
- * @param _txt the graph definition
+ * @param txt the graph definition
 * @param cb callback which is called after rendering is finished with the svg code as inparam.
 * @param container selector to element in which a div with the graph temporarily will be inserted. In one is
 * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
 * completed.
 */
 const render = function(id, _txt, cb, container) {
+  const cnf = getConfig();
+  console.warn(cnf);
  // Check the maximum allowed text size
  let txt = _txt;
-  if (_txt.length > config.maxTextSize) {
+  if (_txt.length > cnf.maxTextSize) {
    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
  }

@ -706,7 +715,7 @@ const render = function(id, _txt, cb, container) {
    select(container)
      .append('div')
      .attr('id', 'd' + id)
-      .attr('style', 'font-family: ' + config.fontFamily)
+      .attr('style', 'font-family: ' + cnf.fontFamily)
      .append('svg')
      .attr('id', id)
      .attr('width', '100%')
@ -736,6 +745,10 @@ const render = function(id, _txt, cb, container) {
  txt = encodeEntities(txt);

  const element = select('#d' + id).node();
+  const graphInit = utils.detectInit(txt);
+  if (graphInit) {
+    reinitialize(graphInit);
+  }
  const graphType = utils.detectType(txt);

  // insert inline style into svg
@ -743,22 +756,22 @@ const render = function(id, _txt, cb, container) {
  const firstChild = svg.firstChild;

  // pre-defined theme
-  let style = themes[config.theme];
+  let style = themes[cnf.theme];
  if (style === undefined) {
    style = '';
  }

  // user provided theme CSS
-  if (config.themeCSS !== undefined) {
-    style += `\n${config.themeCSS}`;
+  if (cnf.themeCSS !== undefined) {
+    style += `\n${cnf.themeCSS}`;
  }
  // user provided theme CSS
-  if (config.fontFamily !== undefined) {
-    style += `\n:root { --mermaid-font-family: ${config.fontFamily}}`;
+  if (cnf.fontFamily !== undefined) {
+    style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
  }
  // user provided theme CSS
-  if (config.altFontFamily !== undefined) {
-    style += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
+  if (cnf.altFontFamily !== undefined) {
+    style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
  }

  // classDef
@ -791,74 +804,74 @@ const render = function(id, _txt, cb, container) {
  try {
    switch (graphType) {
      case 'git':
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        gitGraphRenderer.setConf(config.git);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        gitGraphRenderer.setConf(cnf.git);
        gitGraphRenderer.draw(txt, id, false);
        break;
      case 'flowchart':
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        flowRenderer.setConf(config.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        flowRenderer.setConf(cnf.flowchart);
        flowRenderer.draw(txt, id, false);
        break;
      case 'flowchart-v2':
-        config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        flowRendererV2.setConf(config.flowchart);
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        flowRendererV2.setConf(cnf.flowchart);
        flowRendererV2.draw(txt, id, false);
        break;
      case 'sequence':
-        config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        if (config.sequenceDiagram) {
+        cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        if (cnf.sequenceDiagram) {
          // backwards compatibility
-          sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));
+          sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
          console.error(
            '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
          );
        } else {
-          sequenceRenderer.setConf(config.sequence);
+          sequenceRenderer.setConf(cnf.sequence);
        }
        sequenceRenderer.draw(txt, id);
        break;
      case 'gantt':
-        config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        ganttRenderer.setConf(config.gantt);
+        cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        ganttRenderer.setConf(cnf.gantt);
        ganttRenderer.draw(txt, id);
        break;
      case 'class':
-        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        classRenderer.setConf(config.class);
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        classRenderer.setConf(cnf.class);
        classRenderer.draw(txt, id);
        break;
      case 'state':
-        // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        stateRenderer.setConf(config.state);
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        stateRenderer.setConf(cnf.state);
        stateRenderer.draw(txt, id);
        break;
      case 'stateDiagram':
-        // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        stateRendererV2.setConf(config.state);
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        stateRendererV2.setConf(cnf.state);
        stateRendererV2.draw(txt, id);
        break;
      case 'info':
-        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        infoRenderer.setConf(config.class);
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        infoRenderer.setConf(cnf.class);
        infoRenderer.draw(txt, id, pkg.version);
        break;
      case 'pie':
-        config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-        pieRenderer.setConf(config.class);
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        pieRenderer.setConf(cnf.class);
        pieRenderer.draw(txt, id, pkg.version);
        break;
      case 'er':
-        erRenderer.setConf(config.er);
+        erRenderer.setConf(cnf.er);
        erRenderer.draw(txt, id, pkg.version);
        break;
      case 'journey':
-        journeyRenderer.setConf(config.journey);
+        journeyRenderer.setConf(cnf.journey);
        journeyRenderer.draw(txt, id, pkg.version);
        break;
    }
  } catch (e) {
-    errorRenderer.setConf(config.class);
+    // errorRenderer.setConf(cnf.class);
    errorRenderer.draw(id, pkg.version);
    throw e;
  }
@ -867,7 +880,7 @@ const render = function(id, _txt, cb, container) {
    .selectAll('foreignobject > *')
    .attr('xmlns', 'http://www.w3.org/1999/xhtml');

-  // if (config.arrowMarkerAbsolute) {
+  // if (cnf.arrowMarkerAbsolute) {
  //   url =
  //     window.location.protocol +
  //     '//' +
@ -880,8 +893,8 @@ const render = function(id, _txt, cb, container) {

  // Fix for when the base tag is used
  let svgCode = select('#d' + id).node().innerHTML;
-
-  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
+  logger.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
+  if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') {
    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
  }

@ -916,20 +929,36 @@ const render = function(id, _txt, cb, container) {
  return svgCode;
 };

-const setConf = function(cnf) {
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
-  utils.assignWithDepth(config, cnf);
-};
-
-function initialize(options) {
-  logger.debug('Initializing mermaidAPI ', pkg.version);
-  // Update default config with options supplied at initialization
+function reinitialize(options) {
+  // console.log('re-initialize ', options.logLevel, cnf.logLevel, getConfig().logLevel);
  if (typeof options === 'object') {
-    setConf(options);
+    // setConf(options);
+    setConfig(options);
  }
-  setConfig(config);
-  setLogLevel(config.logLevel);
-  logger.debug(`Initialized mermaidAPI ${JSON.stringify(config, null, 2)}`);
+  // setConfig(config);
+  setLogLevel(getConfig().logLevel);
+  logger.debug('RE-Initializing mermaidAPI ', { version: pkg.version, options, config });
+}
+
+let firstInit = true;
+function initialize(options) {
+  console.log('mermaidAPI.initialize');
+  // Set default options
+  if (typeof options === 'object') {
+    if (firstInit) {
+      firstInit = false;
+      setConfig(config);
+    }
+    setConfig(options);
+  }
+  console.warn('Initializing mermaidAPI theme', {
+    version: pkg.version,
+    options,
+    config,
+    current: getConfig().theme
+  });
+
+  setLogLevel(getConfig().logLevel);
 }

 // function getConfig () {
@ -941,7 +970,13 @@ const mermaidAPI = {
  render,
  parse,
  initialize,
-  getConfig
+  reinitialize,
+  getConfig,
+  setConfig,
+  reset: () => {
+    // console.warn('reset');
+    firstInit = true;
+  }
 };

 export default mermaidAPI;
--- a/src/mermaidAPI.spec.js
+++ b/src/mermaidAPI.spec.js
@ -26,8 +26,13 @@ describe('when using mermaidAPI and ', function() {
      };

      mermaidAPI.initialize({ testObject: object });
+      let config = mermaidAPI.getConfig();
+
+      console.log('1:', config);
+      expect(config.testObject.test1).toBe(1);
      mermaidAPI.initialize({ testObject: { test3: true } });
-      const config = mermaidAPI.getConfig();
+      config = mermaidAPI.getConfig();
+      console.log(config);

      expect(config.testObject.test1).toBe(1);
      expect(config.testObject.test2).toBe(false);