Use courier in all rendering tests

src/config.js

@@ -8,29 +8,43 @@ import config from './defaultConfig';
 export const defaultConfig = Object.freeze(config);
 
 let siteConfig = assignWithDepth({}, defaultConfig);
+let siteConfigDelta;
 let directives = [];
 let currentConfig = assignWithDepth({}, defaultConfig);
 
 export const updateCurrentConfig = (siteCfg, _directives) => {
+  // start with config beeing the siteConfig
   let cfg = assignWithDepth({}, siteCfg);
+  // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);
 
-  // Apply directives
+  // Join directives
   let themeVariables = {};
+  let sumOfDirectives = {};
   for (let i = 0; i < _directives.length; i++) {
     const d = _directives[i];
     sanitize(d);
-    cfg = assignWithDepth(cfg, d);
-    if (d.theme) {
-      cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables);
-    }
+
+    // Apply the data from the directive where the the overrides the themeVaraibles
+    sumOfDirectives = assignWithDepth(sumOfDirectives, d);
   }
-  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;
+
+  cfg = assignWithDepth(cfg, sumOfDirectives);
+
+  if (sumOfDirectives.theme) {
+    const themeVariables = assignWithDepth(
+      siteConfigDelta.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;
 };
@@ -59,6 +73,28 @@ export const setSiteConfig = conf => {
   currentConfig = updateCurrentConfig(siteConfig, directives);
   return siteConfig;
 };
+const deepCopyFunction = inObject => {
+  let outObject, value, key;
+
+  if (typeof inObject !== 'object' || inObject === null) {
+    return inObject; // Return the value if inObject is not an object
+  }
+
+  // Create an array or object to hold the values
+  outObject = Array.isArray(inObject) ? [] : {};
+
+  for (key in inObject) {
+    value = inObject[key];
+
+    // Recursively (deep) copy for nested objects, including arrays
+    outObject[key] = deepCopyFunction(value);
+  }
+
+  return outObject;
+};
+export const setSiteConfigDelta = conf => {
+  siteConfigDelta = assignWithDepth({}, conf);
+};
 export const updateSiteConfig = conf => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);

src/diagrams/state/styles.js

@@ -3,8 +3,6 @@ const getStyles = options =>
   fill: ${options.nodeBorder};
   stroke: none;
   font-size: 10px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
 }
 g.stateGroup text {
   fill: ${options.textColor};
@@ -76,8 +74,6 @@ g.stateGroup line {
   fill: ${options.labelColor};
   font-size: 10px;
   font-weight: bold;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
 }
 
 .node circle.state-start {

src/mermaidAPI.js

@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
   // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  // console.log('Render with config after adding new directives', cnf.fontFamily);
+  console.warn('Render with config after adding new directives', cnf.sequence);
   // console.warn(
   //   'Render with config after adding new directives',
   //   cnf.fontFamily,
@@ -570,6 +570,7 @@ function initialize(options) {
     }
   }
   // Set default options
+  configApi.setSiteConfigDelta(options);
 
   if (options && options.theme && theme[options.theme]) {
     // Todo merge with user options