GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#5237 Styling for clusters

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-06-20 16:32:03 +02:00
parent b69c9821bc
commit 4de0182978
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@ -818,6 +818,10 @@ const addNodeFromVertex = (
linkTarget: vertex.linkTarget,
tooltip: getTooltip(vertex.id),
});
} else {
node.cssStyles = vertex.styles;
node.cssCompiledStyles = getCompiledStyles(vertex.classes);
node.cssClasses = vertex.classes.join(' ');
}
};
@ -827,10 +831,10 @@ function getCompiledStyles(classDefs: string[]) {
const cssClass = classes.get(customClass);
if (cssClass) {
if (cssClass.styles) {
compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])];
compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
}
if (cssClass.textStyles) {
compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])];
compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])].map((s) => s.trim());
}
}
}
@ -866,8 +870,8 @@ export const getData = () => {
labelStyle: '',
parentId: parentDB.get(subGraph.id),
padding: config.flowchart?.padding || 8,
cssStyles: [],
cssClasses: '',
cssCompiledStyles: getCompiledStyles(subGraph.classes),
cssClasses: subGraph.classes.join(' '),
shape: 'rect',
dir: subGraph.dir,
isGroup: true,
@ -902,6 +906,8 @@ export const getData = () => {
edges.push(edge);
});
log.debug('IPI nodes', JSON.stringify(nodes, null, 2));
return { nodes, edges, other: {}, config };
};

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

@ -8,7 +8,10 @@ import { createText } from '../createText.ts';
import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
import createLabel from './createLabel.js';
import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
const rect = async (parent, node) => {
log.info('Creating subgraph rect for ', node.id, node);
@ -16,13 +19,18 @@ const rect = async (parent, node) => {
const { themeVariables, handdrawnSeed } = siteConfig;
const { clusterBkg, clusterBorder } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node);
// Add outer g element
const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
const shapeSvg = parent
.insert('g')
.attr('class', 'cluster ' + node.cssClasses)
.attr('id', node.id);
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
// Create the label and insert it after the rect
const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label');
const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
// const text = label
// .node()
@ -82,7 +90,7 @@ const rect = async (parent, node) => {
rect = shapeSvg.insert('rect', ':first-child');
// center the rect around its coordinate
rect
.attr('style', node.cssStyles)
.attr('style', nodeStyles)
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', x)
@ -104,6 +112,13 @@ const rect = async (parent, node) => {
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
);
}
if (labelStyles) {
const span = labelEl.select('span');
if (span) {
span.attr('style', labelStyles);
}
}
// Center the label
const rectBox = rect.node().getBBox();