GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Basic fix for handdrawn subgraph styling

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-08-23 08:24:36 +02:00
parent 99ee235e75
commit 09afb077f0
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@ -19,7 +19,7 @@ const rect = async (parent, node) => {
const { themeVariables, handDrawnSeed } = siteConfig; const { themeVariables, handDrawnSeed } = siteConfig;
const { clusterBkg, clusterBorder } = themeVariables; const { clusterBkg, clusterBorder } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);
// Add outer g element // Add outer g element
const shapeSvg = parent const shapeSvg = parent
@ -79,6 +79,9 @@ const rect = async (parent, node) => {
log.debug('Rough node insert CXC', roughNode); log.debug('Rough node insert CXC', roughNode);
return roughNode; return roughNode;
}, ':first-child'); }, ':first-child');
// Should we affect the options instead of doing this?
rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));
rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));
} else { } else {
// add the rect // add the rect
rect = shapeSvg.insert('rect', ':first-child'); rect = shapeSvg.insert('rect', ':first-child');

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
View File

@ -37,6 +37,8 @@ export const styles2String = (node: Node) => {
const { stylesArray } = compileStyles(node); const { stylesArray } = compileStyles(node);
const labelStyles: string[] = []; const labelStyles: string[] = [];
const nodeStyles: string[] = []; const nodeStyles: string[] = [];
const borderStyles: string[] = [];
const backgroundStyles: string[] = [];
stylesArray.forEach((style) => { stylesArray.forEach((style) => {
const key = style[0]; const key = style[0];
@ -63,10 +65,22 @@ export const styles2String = (node: Node) => {
labelStyles.push(style.join(':') + ' !important'); labelStyles.push(style.join(':') + ' !important');
} else { } else {
nodeStyles.push(style.join(':') + ' !important'); nodeStyles.push(style.join(':') + ' !important');
if (key === 'stroke' || key === 'stroke-width') {
borderStyles.push(style.join(':') + ' !important');
}
if (key === 'fill') {
backgroundStyles.push(style.join(':') + ' !important');
}
} }
}); });
return { labelStyles: labelStyles.join(';'), nodeStyles: nodeStyles.join(';') }; return {
labelStyles: labelStyles.join(';'),
nodeStyles: nodeStyles.join(';'),
stylesArray,
borderStyles,
backgroundStyles,
};
}; };
// Striped fill like start or fork nodes in state diagrams // Striped fill like start or fork nodes in state diagrams