#1224 Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs
This commit is contained in:
parent
4d5ecc5518
commit
822df37f8c
|
@ -575,4 +575,27 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
|
|||
{ flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
it('30: Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs', () => {
|
||||
imgSnapshotTest(
|
||||
`graph LR
|
||||
subgraph id1 [title is set]
|
||||
A-->B
|
||||
end
|
||||
subgraph id2 [title]
|
||||
E
|
||||
end
|
||||
|
||||
B-->C
|
||||
|
||||
subgraph id3
|
||||
C-->D
|
||||
end
|
||||
class id3,id2,A redBg;
|
||||
class id3,A whiteTxt;
|
||||
classDef redBg fill:#622;
|
||||
classDef whiteTxt color: white;
|
||||
`,
|
||||
{ flowchart: { htmlLabels: false } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -151,12 +151,18 @@ export const updateLink = function(positions, style) {
|
|||
|
||||
export const addClass = function(id, style) {
|
||||
if (typeof classes[id] === 'undefined') {
|
||||
classes[id] = { id: id, styles: [] };
|
||||
classes[id] = { id: id, styles: [], textStyles: [] };
|
||||
}
|
||||
|
||||
if (typeof style !== 'undefined') {
|
||||
if (style !== null) {
|
||||
style.forEach(function(s) {
|
||||
console.log('style', s);
|
||||
if (s.match('color')) {
|
||||
const newStyle1 = s.replace('fill', 'bgFill');
|
||||
const newStyle2 = newStyle1.replace('color', 'fill');
|
||||
classes[id].textStyles.push(newStyle2);
|
||||
}
|
||||
classes[id].styles.push(s);
|
||||
});
|
||||
}
|
||||
|
@ -196,6 +202,8 @@ export const setClass = function(ids, className) {
|
|||
vertices[id].classes.push(className);
|
||||
}
|
||||
|
||||
console.log('Setting class', className, id, subGraphLookup[id]);
|
||||
|
||||
if (typeof subGraphLookup[id] !== 'undefined') {
|
||||
subGraphLookup[id].classes.push(className);
|
||||
}
|
||||
|
@ -373,7 +381,8 @@ export const defaultStyle = function() {
|
|||
* Clears the internal graph db so that a new graph can be parsed.
|
||||
*/
|
||||
export const addSubGraph = function(_id, list, _title) {
|
||||
let id = _id;
|
||||
console.log('Adding subgraph', _id);
|
||||
let id = _id.trim();
|
||||
let title = _title;
|
||||
if (_id === _title && _title.match(/\s/)) {
|
||||
id = undefined;
|
||||
|
@ -410,6 +419,7 @@ export const addSubGraph = function(_id, list, _title) {
|
|||
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
|
||||
subGraphs.push(subGraph);
|
||||
subGraphLookup[id] = subGraph;
|
||||
console.log('Adding subgraph', id, subGraphs, subGraphLookup);
|
||||
return id;
|
||||
};
|
||||
|
||||
|
|
|
@ -283,6 +283,9 @@ export const draw = function(text, id) {
|
|||
logger.debug('Parsing failed');
|
||||
}
|
||||
|
||||
console.log('Classes:', flowDb.getClasses());
|
||||
console.log('Subgraphs:', flowDb.getSubGraphs());
|
||||
|
||||
// Fetch the default direction, use TD if none was found
|
||||
let dir = flowDb.getDirection();
|
||||
if (typeof dir === 'undefined') {
|
||||
|
@ -430,6 +433,11 @@ export const draw = function(text, id) {
|
|||
const te = cluster.select('.label');
|
||||
te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
|
||||
te.attr('id', id + 'Text');
|
||||
|
||||
console.log('Fixing subgraph', id, subG.id, subG.classes); // eslitn-disable-line
|
||||
for (let j = 0; j < subG.classes.length; j++) {
|
||||
clusterEl[0].classList.add(subG.classes[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -533,11 +533,18 @@ const render = function(id, _txt, cb, container) {
|
|||
// classDef
|
||||
if (graphType === 'flowchart') {
|
||||
const classes = flowRenderer.getClasses(txt);
|
||||
console.log('classes in mermaidApi', classes);
|
||||
for (const className in classes) {
|
||||
style += `\n.${className} > * { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
if (classes[className].textStyles) {
|
||||
style += `\n.${className} tspan { ${classes[className].textStyles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
}
|
||||
}
|
||||
console.log(style);
|
||||
}
|
||||
|
||||
const style1 = document.createElement('style');
|
||||
|
|
Loading…
Reference in New Issue