Merge pull request #5 from mermaid-js/develop

Merging upstream develop
mermaid-js · Jun 17, 2020 · d4b733f · d4b733f
2 parents 9d41368 + e4b63a6
commit d4b733f
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 105 deletions.
diff --git 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)
 

diff --git 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'
         }
       );
 

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
@@ -328,4 +328,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' } }
+      );
+    });
+  });
 });
diff --git 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 @@ <h1>info below</h1>
         // 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>

diff --git 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,15 +27,16 @@
     <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;}",
         // fontFamily: '\"trebuchet ms\", verdana, arial;'
         // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
         // fontFamily: '"Mansalva", cursive',
         fontFamily: '"Noto Sans SC", sans-serif'
-      });
+      };
+      mermaid.initialize(window.mermaidDefault);
     </script>
   </body>
 </html>
diff --git 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();
   }

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
@@ -832,7 +832,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 var config = {};
 
 var setConf = function setConf(cnf) {
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
+  console.log('config::setConf', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
+
   var lvl1Keys = Object.keys(cnf);
 
   for (var i = 0; i < lvl1Keys.length; i++) {
@@ -852,6 +853,8 @@ var setConf = function setConf(cnf) {
       config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
     }
   }
+
+  console.log('config::setConf done', config);
 };
 
 var setConfig = function setConfig(conf) {
@@ -21478,7 +21481,8 @@ var render = function render(id, _txt, cb, container) {
 };
 
 var setConf = function setConf(cnf) {
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
+  console.log('set conf ', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
+
   var lvl1Keys = Object.keys(cnf);
 
   for (var i = 0; i < lvl1Keys.length; i++) {
@@ -21499,6 +21503,8 @@ var setConf = function setConf(cnf) {
       config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
     }
   }
+
+  console.log('set conf done', config);
 };
 
 function reinitialize(options) {
@@ -21516,7 +21522,16 @@ function reinitialize(options) {
 }
 
 function initialize(options) {
-  var _config = config;
+  console.log('initialize ', options, config, Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])());
+
+  var _config = Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])(); // Set default options
+
+
+  if (_typeof(options) === 'object') {
+    setConf(_config);
+    Object(_config__WEBPACK_IMPORTED_MODULE_3__["setConfig"])(_config);
+  }
+
   _logger__WEBPACK_IMPORTED_MODULE_4__["logger"].debug('Initializing mermaidAPI ', {
     version: _package_json__WEBPACK_IMPORTED_MODULE_2__.version,
     options: options,

diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
@@ -46615,7 +46615,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 var config = {};
 
 var setConf = function setConf(cnf) {
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
+  console.log('config::setConf', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
+
   var lvl1Keys = Object.keys(cnf);
 
   for (var i = 0; i < lvl1Keys.length; i++) {
@@ -46635,6 +46636,8 @@ var setConf = function setConf(cnf) {
       config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
     }
   }
+
+  console.log('config::setConf done', config);
 };
 
 var setConfig = function setConfig(conf) {
@@ -67236,7 +67239,8 @@ var render = function render(id, _txt, cb, container) {
 };
 
 var setConf = function setConf(cnf) {
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
+  console.log('set conf ', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
+
   var lvl1Keys = Object.keys(cnf);
 
   for (var i = 0; i < lvl1Keys.length; i++) {
@@ -67257,6 +67261,8 @@ var setConf = function setConf(cnf) {
       config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
     }
   }
+
+  console.log('set conf done', config);
 };
 
 function reinitialize(options) {
@@ -67274,7 +67280,16 @@ function reinitialize(options) {
 }
 
 function initialize(options) {
-  var _config = config;
+  console.log('initialize ', options, config, Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])());
+
+  var _config = Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])(); // Set default options
+
+
+  if (_typeof(options) === 'object') {
+    setConf(_config);
+    Object(_config__WEBPACK_IMPORTED_MODULE_3__["setConfig"])(_config);
+  }
+
   _logger__WEBPACK_IMPORTED_MODULE_4__["logger"].debug('Initializing mermaidAPI ', {
     version: _package_json__WEBPACK_IMPORTED_MODULE_2__.version,
     options: options,

diff --git a/dist/mermaid.js.map b/dist/mermaid.js.map
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.min.js.map b/dist/mermaid.min.js.map
diff --git a/src/config.js b/src/config.js
@@ -1,24 +1,35 @@
+// import { logger } from './logger';
 let config = {};
 
 const setConf = function(cnf) {
+  // console.log('config::setConf', cnf);
   // Top level initially mermaid, gflow, sequenceDiagram and gantt
   const lvl1Keys = Object.keys(cnf);
   for (let i = 0; i < lvl1Keys.length; i++) {
     if (typeof cnf[lvl1Keys[i]] === 'object' && cnf[lvl1Keys[i]] != null) {
       const lvl2Keys = Object.keys(cnf[lvl1Keys[i]]);
 
       for (let j = 0; j < lvl2Keys.length; j++) {
-        // logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j])
+        // logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j]);
         if (typeof config[lvl1Keys[i]] === 'undefined') {
           config[lvl1Keys[i]] = {};
         }
-        // logger.debug('Setting config: ' + lvl1Keys[i] + ' ' + lvl2Keys[j] + ' to ' + cnf[lvl1Keys[i]][lvl2Keys[j]])
+        // logger.debug(
+        //   'Setting config: ' +
+        //     lvl1Keys[i] +
+        //     ' ' +
+        //     lvl2Keys[j] +
+        //     ' to ' +
+        //     cnf[lvl1Keys[i]][lvl2Keys[j]]
+        // );
         config[lvl1Keys[i]][lvl2Keys[j]] = cnf[lvl1Keys[i]][lvl2Keys[j]];
       }
     } else {
+      // logger.debug('Setting config: ' + lvl1Keys[i] + ' to ' + cnf[lvl1Keys[i]]);
       config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
     }
   }
+  // console.log('config::setConf done', config);
 };
 
 export const setConfig = conf => {

diff --git 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 } }%%

diff --git a/src/mermaid.js b/src/mermaid.js
@@ -29,7 +29,7 @@ import { logger } from './logger';
  */
 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 */
@@ -69,11 +69,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;
@@ -122,6 +122,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;
@@ -130,8 +133,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);
 };
 
 /**