#1542 Handling of config

cypress/platform/current.html

@@ -74,8 +74,9 @@ stateDiagram-v2
   A --> D: asd123
       </div>
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
       %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
+      <div class="mermaid" style="width: 50%; height: 20%;">
+        %%{init: {'theme': 'base'}}%%
 
         graph TB
         subgraph apa
@@ -92,7 +93,7 @@ graph TD
             C
           end
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 sequenceDiagram
 Alice->Bob: Hello Bob, how are you?
 Note over Alice,Bob: Looks
@@ -105,8 +106,8 @@ Note over Bob,Alice: Looks back
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'base',
+        // theme: 'base',
-        // themeVariables:{primaryColor: '#ff0000'},
+        // themeVariables:{primaryColor: '#0000ff'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

src/config.js

@@ -15,20 +15,27 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
   let cfg = assignWithDepth({}, siteCfg);
 
   // Apply directives
-  let themeVariables;
+  let themeVariables = {};
-  _directives.forEach(d => {
+  for (let i = 0; i < _directives.length; i++) {
+    const d = _directives[i];
     sanitize(d);
     cfg = assignWithDepth(cfg, d);
     if (d.themeVariables) {
       themeVariables = d.themeVariables;
     }
-  });
+  }
-  if (themeVariables && currentConfig.theme && theme[currentConfig.theme]) {
+  if (cfg.theme && theme[cfg.theme]) {
-    const variables = theme[currentConfig.theme].getThemeVariables(themeVariables);
+    // console.warn('cfg beeing updated main bkg', themeVariables, cfg.theme);
+    const variables = theme[cfg.theme].getThemeVariables(themeVariables);
+    // console.warn('cfg beeing updated 2 main bkg', variables.mainBkg);
     cfg.themeVariables = variables;
   }
+  // else {
+  //   console.warn('cfg not beeing updated main bkg', themeVariables, cfg.theme);
+  // }
 
   currentConfig = cfg;
+  // console.warn('cfg updated main bkg', cfg.sequence);
   return cfg;
 };
 /**
@@ -49,7 +56,6 @@ export const setSiteConfig = conf => {
   // siteConfig = { ...defaultConfig, ...conf };
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
-  // console.warn(siteConfig.sequence);
   currentConfig = updateCurrentConfig(siteConfig, directives);
   return siteConfig;
 };
@@ -165,6 +171,7 @@ export const reset = () => {
 
   // Replace current config with siteConfig
   directives = [];
+  // console.warn(siteConfig.sequence);
   updateCurrentConfig(siteConfig, directives);
 };
 

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -942,8 +942,8 @@ describe('when rendering a sequenceDiagram APA', function() {
       wrap: false,
       mirrorActors: false
     };
+    console.warn('Set site config');
     configApi.setSiteConfig({ logLevel: 5, sequence: conf });
-    // console.warn('Config = ', configApi.getConfig())
   });
   let conf;
   beforeEach(function() {

src/mermaidAPI.js

@@ -216,9 +216,10 @@ const render = function(id, _txt, cb, container) {
     const siteConfig = configApi.getSiteConfig();
     configApi.addDirective(siteConfig);
   }
+  // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  console.log('Render', cnf);
+  // console.warn('Render with config after adding new directives', cnf.themeVariables.mainBkg);
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
     txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -294,6 +295,9 @@ const render = function(id, _txt, cb, container) {
       }
     }
   }
+
+  // logger.warn(cnf.themeVariables);
+
   const stylis = new Stylis();
   const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
@@ -578,8 +582,8 @@ const mermaidAPI = Object.freeze({
   reset: () => {
     console.warn('reset');
     configApi.reset();
-    const siteConfig = configApi.getSiteConfig();
+    // const siteConfig = configApi.getSiteConfig();
-    updateRendererConfigs(siteConfig);
+    // updateRendererConfigs(siteConfig);
   },
   globalReset: () => {
     configApi.reset(configApi.defaultConfig);

src/themes/theme-base.js

@@ -56,6 +56,7 @@ class Theme {
 
     this.nodeBkg = this.primaryColor;
     this.mainBkg = this.primaryColor;
+    // console.warn('main bkg ', this.mainBkg);
     this.nodeBorder = this.primaryBorderColor;
     this.clusterBkg = this.tertiaryColor;
     this.clusterBorder = this.tertiaryBorderColor;