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

Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-24 11:30:30 +02:00
parent f8c16f577b 97be6cbd73
commit e451f83b08
3 changed files with 30 additions and 59 deletions
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 };
};

55
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@@ -161,63 +161,16 @@ function insertOrUpdateNode(nodes, nodeData, classes) {
//Populate node style attributes if nodeData has classes defined
if (nodeData.cssClasses) {
if (!Array.isArray(nodeData.cssCompiledStyles)) {
nodeData.cssCompiledStyles = [];
}
nodeData.cssClasses.split(' ').forEach((cssClass) => {
if (classes.get(cssClass)) {
const classDef = classes.get(cssClass);
// classDef.styles.forEach((style) => {
// nodeData.cssCompiledStyles += style + ',';
// // Populate nodeData with style attributes specifically to be used by rough.js
// if (style && style.startsWith('fill:')) {
// nodeData.backgroundColor = style.replace('fill:', '');
// }
// if (style && style.startsWith('stroke:')) {
// nodeData.borderColor = style.replace('stroke:', '');
// }
// if (style && style.startsWith('stroke-width:')) {
// nodeData.borderWidth = style.replace('stroke-width:', '');
// }
// nodeData.cssStyles += style + ';';
// });
// classDef.textStyles.forEach((style) => {
// nodeData.labelStyle += style + ';';
// if (style && style.startsWith('fill:')) {
// nodeData.labelTextColor = style.replace('fill:', '');
// }
// });
nodeData.cssCompiledStyles = [...nodeData.cssCompiledStyles, ...classDef.styles];
}
});
//Populate node style attributes if nodeData has classes defined
if (nodeData.cssStyles) {
// nodeData.cssStyles.split(' ').forEach((csStyle) => {
// if (classes[cssClass]) {
// classes[cssClass].styles.forEach((style) => {
// // Populate nodeData with style attributes specifically to be used by rough.js
// if (style && style.startsWith('fill:')) {
// nodeData.backgroundColor = style.replace('fill:', '');
// }
// if (style && style.startsWith('stroke:')) {
// nodeData.borderColor = style.replace('stroke:', '');
// }
// if (style && style.startsWith('stroke-width:')) {
// nodeData.borderWidth = style.replace('stroke-width:', '');
// }
// nodeData.cssStyles += style + ';';
// });
// classes[cssClass].textStyles.forEach((style) => {
// nodeData.labelStyle += style + ';';
// if (style && style.startsWith('fill:')) {
// nodeData.labelTextColor = style.replace('fill:', '');
// }
// });
// }
// });
}
// nodeData.labelTextColor = '#ffffff';
// nodeData.labelStyle = 'color:#ffffff';
// nodeData.cssStyles = 'fill:#f77';
}
const existingNodeData = nodes.find((node) => node.id === nodeData.id);
if (existingNodeData) {

20
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,17 +19,19 @@ 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('class', 'cluster ' + node.cssClasses)
.attr('id', node.id)
.attr('data-look', node.look);
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()
@@ -86,7 +91,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)
@@ -108,6 +113,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();