marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-02 23:26:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1874 Protecting the original configuration

Browse Source
This commit is contained in:
Knut Sveidqvist
2021-01-27 22:23:33 +01:00
parent 2e5771b9e8
commit 177cd30854
6 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
cypress/platform/regression/issue-1874.html Normal file
View File

@@ -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>

2
docs/developer-docs/configuration.md
View File

@@ -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**. * 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. * 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 ## Theme configuration

17
src/config.js
View File

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

3
src/diagrams/flowchart/styles.js
View File

@@ -69,6 +69,9 @@ const getStyles = options =>
.cluster span { .cluster span {
color: ${options.titleColor}; color: ${options.titleColor};
} }
.cluster div {
color: ${options.titleColor};
}
div.mermaidTooltip { div.mermaidTooltip {
position: absolute; position: absolute;

8
src/mermaidAPI.js
View File

@@ -223,12 +223,6 @@ const render = function(id, _txt, cb, container) {
// console.warn('Render fetching config'); // console.warn('Render fetching config');
const cnf = configApi.getConfig(); 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 // Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) { if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -577,7 +571,7 @@ function initialize(options) {
} }
} }
// Set default options // Set default options
configApi.setSiteConfigDelta(options); configApi.saveConfigFromInitilize(options);
if (options && options.theme && theme[options.theme]) { if (options && options.theme && theme[options.theme]) {
// Todo merge with user options // Todo merge with user options

1
src/styles.js
View File

@@ -65,6 +65,7 @@ const getStyles = (type, userStyles, options) => {
.marker { .marker {
fill: ${options.lineColor}; fill: ${options.lineColor};
stroke: ${options.lineColor};
} }
.marker.cross { .marker.cross {
stroke: ${options.lineColor}; stroke: ${options.lineColor};