#1542 Test page using directoives to switch theme

mermaid-js · Jul 17, 2020 · f9667cd · f9667cd
1 parent 65c2f58
commit f9667cd
Show file tree

Hide file tree

Showing 8 changed files with 1,185 additions and 691 deletions.
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -80,6 +80,24 @@ <h1>info below</h1>
       <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
       %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
 
+      graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+      </div>
+      <div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
+      %%{init: { 'logLevel': 1} }%%
+
       graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -104,7 +122,7 @@ <h1>info below</h1>
         };
       mermaid.initialize({
         // theme: 'dark',
-        theme: 'dark',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
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/mermaidAPI.js b/src/mermaidAPI.js
@@ -12,7 +12,6 @@
  */
 import Stylis from 'stylis';
 import { select } from 'd3';
-// import scope from 'scope-css';
 import pkg from '../package.json';
 import { setConfig, getConfig, setSiteConfig, getSiteConfig } from './config';
 import { logger, setLogLevel } from './logger';
@@ -56,7 +55,6 @@ const themes = {};
 
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
   themes[themeName] = require(`./theme-${themeName}.js`);
-  console.warn(themeName, themes[themeName]);
 }
 
 function parse(text) {
@@ -199,8 +197,6 @@ export const decodeEntities = function(text) {
  * completed.
  */
 const render = function(id, _txt, cb, container) {
-  // debugger;
-
   const cnf = getConfig();
   // Check the maximum allowed text size
   let txt = _txt;
@@ -284,17 +280,12 @@ const render = function(id, _txt, cb, container) {
     }
   }
   const stylis = new Stylis();
-  // stylis.use(extraScopePlugin(`#${id}`));
-  console.warn('graphType', graphType);
   const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
 
   const style1 = document.createElement('style');
-  // style1.innerHTML = scope(style, `#${id}`);
   style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
-  // console.warn(rules);
-
   // Verify that the generated svgs are ok before removing this
 
   // const style2 = document.createElement('style');
@@ -529,6 +520,11 @@ function updateRendererConfigs(conf) {
 
 function reinitialize(options) {
   console.log(`mermaidAPI.reinitialize: v${pkg.version}`, options);
+  if (options.theme && themes[options.theme]) {
+    // Todo merge with user options
+    options.themeVariables = themes[options.theme];
+  }
+
   // Set default options
   const config = typeof options === 'object' ? setConfig(options) : getSiteConfig();
   updateRendererConfigs(config);