mermaid-js#1874 Protecting the original configuration

Narretz · Jan 27, 2021 · 177cd30 · 177cd30
1 parent 2e5771b
commit 177cd30
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 19 deletions.
diff --git a/cypress/platform/regression/issue-1874.html b/cypress/platform/regression/issue-1874.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <script src="http://localhost:9000/mermaid.js"></script>
+  <script>
+      mermaid.initialize({
+       theme: 'base',
+       themeVariables: {
+      },
+      startOnLoad: true,
+      });
+  </script>
+
+  </head>
+  <body>
+  <h1>Example</h1>
+  <div class="mermaid">
+%%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%%
+sequenceDiagram
+    Bert->>+Ernie: Start looking for the cookie!
+    Ernie-->>-Bert: Found it!
+    Note left of Ernie: Cookies are good
+  </div>
+  <div class="mermaid">
+%%{init:{"theme":"base", "themeVariables": {}}}%%
+sequenceDiagram
+    Bert->>+Ernie: Start looking for the cookie!
+    Ernie-->>-Bert: Found it!
+    Note left of Ernie: Cookies are good
+  </div>
+</body>
+</html>
diff --git a/docs/developer-docs/configuration.md b/docs/developer-docs/configuration.md
@@ -6,7 +6,7 @@ When mermaid starts configuration is extracted to a configuration to be used for
 * Overrides on the site level, set is set by the initialize call and will  be applied for all diagrams in the site/app. The term for this is the **siteConfig**.
 * Directives - diagram authors can update select configuration parameters directly int he diagram code via directives and these are applied to the render config.
 
-**The render config** is configration that is used when rendering by applying these configurations.
+**The render config** is configuration that is used when rendering by applying these configurations.
 
 ## Theme configuration
 

diff --git a/src/config.js b/src/config.js
@@ -8,7 +8,7 @@ import config from './defaultConfig';
 export const defaultConfig = Object.freeze(config);
 
 let siteConfig = assignWithDepth({}, defaultConfig);
-let siteConfigDelta;
+let configFromInitialize;
 let directives = [];
 let currentConfig = assignWithDepth({}, defaultConfig);
 
@@ -30,20 +30,14 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
   cfg = assignWithDepth(cfg, sumOfDirectives);
 
   if (sumOfDirectives.theme) {
+    const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);
     const themeVariables = assignWithDepth(
-      siteConfigDelta.themeVariables || {},
+      tmpConfigFromInitialize.themeVariables || {},
       sumOfDirectives.themeVariables
     );
     cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);
   }
 
-  // if (cfg.theme && theme[cfg.theme]) {
-  //   let tVars = assignWithDepth({}, cfg.themeVariables);
-  //   tVars = assignWithDepth(tVars, themeVariables);
-  //   const variables = theme[cfg.theme].getThemeVariables(tVars);
-  //   cfg.themeVariables = variables;
-  // }
-
   currentConfig = cfg;
   return cfg;
 };
@@ -73,9 +67,10 @@ export const setSiteConfig = conf => {
   return siteConfig;
 };
 
-export const setSiteConfigDelta = conf => {
-  siteConfigDelta = assignWithDepth({}, conf);
+export const saveConfigFromInitilize = conf => {
+  configFromInitialize = assignWithDepth({}, conf);
 };
+
 export const updateSiteConfig = conf => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);

diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js
@@ -69,6 +69,9 @@ const getStyles = options =>
   .cluster span {
     color: ${options.titleColor};
   }
+  .cluster div {
+    color: ${options.titleColor};
+  }
 
   div.mermaidTooltip {
     position: absolute;

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -223,12 +223,6 @@ const render = function(id, _txt, cb, container) {
   // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  // console.warn('Render with config after adding new directives', cnf.sequence);
-  // console.warn(
-  //   'Render with config after adding new directives',
-  //   cnf.fontFamily,
-  //   cnf.themeVariables.fontFamily
-  // );
   // 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';
@@ -577,7 +571,7 @@ function initialize(options) {
     }
   }
   // Set default options
-  configApi.setSiteConfigDelta(options);
+  configApi.saveConfigFromInitilize(options);
 
   if (options && options.theme && theme[options.theme]) {
     // Todo merge with user options

diff --git a/src/styles.js b/src/styles.js
@@ -65,6 +65,7 @@ const getStyles = (type, userStyles, options) => {
 
   .marker {
     fill: ${options.lineColor};
+    stroke: ${options.lineColor};
   }
   .marker.cross {
     stroke: ${options.lineColor};