Skip to content

Commit

Permalink
Merge pull request mermaid-js#1245 from mermaid-js/feature/1224_styli…
Browse files Browse the repository at this point in the history
…ng_of_subgraphs

Feature/1224 styling of subgraphs
  • Loading branch information
knsv authored Feb 5, 2020
2 parents 18d0d43 + 00d2a1f commit 7e01f9b
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 2 deletions.
23 changes: 23 additions & 0 deletions cypress/integration/rendering/flowchart.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -583,4 +583,27 @@ it('25: 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 } }
);
});
});
14 changes: 12 additions & 2 deletions src/diagrams/flowchart/flowDb.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
};

Expand Down
8 changes: 8 additions & 0 deletions src/diagrams/flowchart/flowRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,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') {
Expand Down Expand Up @@ -416,6 +419,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]);
}
}
}

Expand Down
7 changes: 7 additions & 0 deletions src/mermaidAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit 7e01f9b

Please sign in to comment.