From f1080996231d5186b01fc1303565c9bad3f25a7e Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 17:37:16 +0200 Subject: [PATCH 1/2] --- cypress/platform/knsv.html | 42 +++++++++++++++++--------------- src/dagre-wrapper/clusters.js | 2 +- src/dagre-wrapper/createLabel.js | 3 ++- src/dagre-wrapper/edges.js | 3 ++- 4 files changed, 28 insertions(+), 22 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index d7a5cee31..be2eba969 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -22,29 +22,33 @@

info below

-
-flowchart TD - subgraph main - subgraph subcontainer - subcontainer-child - end - subcontainer-child--> subcontainer-sibling +
+graph TD + A[Christmas] -->|Get money| B(Go shopping) + subgraph T ["Test"] + A + B end + classDef Test fill:#F84E68,stroke:#333,color:white; + class A,T Test + classDef TestSub fill:green; + class T TestSub + linkStyle 0 color:orange, stroke: orange;
-flowchart TB - b-->B - a-->c - subgraph B - c - end - subgraph A - a - b - B - end +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + subgraph T ["Test"] + A + B + end + classDef Test fill:#F84E68,stroke:#333,color:white; + class A,T Test + classDef TestSub fill:green; + class T TestSub + linkStyle 0 color:orange, stroke: orange;
-
+
flowchart TB subgraph A a -->b diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js index db3aee001..9341af1e5 100644 --- a/src/dagre-wrapper/clusters.js +++ b/src/dagre-wrapper/clusters.js @@ -10,7 +10,7 @@ const rect = (parent, node) => { // Add outer g element const shapeSvg = parent .insert('g') - .attr('class', 'cluster') + .attr('class', 'cluster' + (node.class ? ' ' + node.class : '')) .attr('id', node.id); // add the rect diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js index 055f6cfb5..688563db8 100644 --- a/src/dagre-wrapper/createLabel.js +++ b/src/dagre-wrapper/createLabel.js @@ -86,7 +86,8 @@ const createLabel = (_vertexText, style, isTitle, isNode) => { label: vertexText.replace( /fa[lrsb]?:fa-[\w-]+/g, s => `` - ) + ), + labelStyle: style.replace('fill:', 'color:') }; let vertexNode = addHtmlLabel(node); // vertexNode.parentNode.removeChild(vertexNode); diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index f6763dd17..255518612 100644 --- a/src/dagre-wrapper/edges.js +++ b/src/dagre-wrapper/edges.js @@ -387,7 +387,8 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) .append('path') .attr('d', lineFunction(lineData)) .attr('id', edge.id) - .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')); + .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) + .attr('style', edge.style); // DEBUG code, adds a red circle at each edge coordinate // edge.points.forEach(point => { From 53933d934d3bd011407fc605f9d441f84a0c887b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 17:45:19 +0200 Subject: [PATCH 2/2] --- .../integration/rendering/flowchart-v2.spec.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index fc35980bc..a08099aee 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -324,5 +324,23 @@ end {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); }); + it('59: handle styling of subgraphs and links', () => { + imgSnapshotTest( + ` + flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + subgraph T ["Test"] + A + B + end + classDef Test fill:#F84E68,stroke:#333,color:white; + class A,T Test + classDef TestSub fill:green; + class T TestSub + linkStyle 0 color:orange, stroke: orange; + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); });