diff --git a/cypress/platform/regression/issue-1874.html b/cypress/platform/regression/issue-1874.html new file mode 100644 index 000000000..9fea6bcec --- /dev/null +++ b/cypress/platform/regression/issue-1874.html @@ -0,0 +1,31 @@ + + + + + + + +

Example

+
+%%{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 +
+
+%%{init:{"theme":"base", "themeVariables": {}}}%% +sequenceDiagram + Bert->>+Ernie: Start looking for the cookie! + Ernie-->>-Bert: Found it! + Note left of Ernie: Cookies are good +
+ + \ No newline at end of file diff --git a/docs/developer-docs/configuration.md b/docs/developer-docs/configuration.md index 34c88212d..5db67dd0e 100644 --- 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 index c3ab058fd..c1f7fe347 100644 --- 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 index 47062a119..c282445b3 100644 --- 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 index 976b6fa4a..c2de8fc64 100755 --- 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 index b4d9f7f30..7368638fe 100644 --- 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};