From bf8e7a3590f3b912e1d0cb099555ea27f352a8fb Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Sat, 23 Jan 2021 18:10:21 +0100 Subject: [PATCH 1/3] #1783 Apply styles to all types of flowchart node shapes --- .../rendering/flowchart-v2.spec.js | 30 ++++++++++ .../integration/rendering/flowchart.spec.js | 30 ++++++++++ dist/flowchart.html | 57 +++++++++++++++++++ src/dagre-wrapper/nodes.js | 25 +++++++- 4 files changed, 140 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 44725fddf..aba0d35d6 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -362,6 +362,36 @@ flowchart TD {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); }); + it('60: handle styling for all node shapes', () => { + imgSnapshotTest( + ` + flowchart LR + A[red text] -->|default style| B(blue text) + C([red text]) -->|default style| D[[blue text]] + E[(red text)] -->|default style| F((blue text)) + G>red text] -->|default style| H{blue text} + I{{red text}} -->|default style| J[/blue text/] + K[\red text\] -->|default style| L[/blue text\] + M[\red text/] -->|default style| N[blue text] + linkStyle default color:Sienna; + style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style B stroke:#0000ff,fill:#ccccff,color:#0000ff + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style F stroke:#0000ff,fill:#ccccff,color:#0000ff + style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style H stroke:#0000ff,fill:#ccccff,color:#0000ff + style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style J stroke:#0000ff,fill:#ccccff,color:#0000ff + style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style L stroke:#0000ff,fill:#ccccff,color:#0000ff + style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style N stroke:#0000ff,fill:#ccccff,color:#0000ff + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); it('61: fontawesome icons in edge labels', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 30e9dfe34..d53626781 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -787,6 +787,36 @@ describe('Flowchart', () => { {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); }); + it('60: handle styling for all node shapes', () => { + imgSnapshotTest( + ` + graph LR + A[red text] -->|default style| B(blue text) + C([red text]) -->|default style| D[[blue text]] + E[(red text)] -->|default style| F((blue text)) + G>red text] -->|default style| H{blue text} + I{{red text}} -->|default style| J[/blue text/] + K[\red text\] -->|default style| L[/blue text\] + M[\red text/] -->|default style| N[blue text] + linkStyle default color:Sienna; + style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style B stroke:#0000ff,fill:#ccccff,color:#0000ff + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style F stroke:#0000ff,fill:#ccccff,color:#0000ff + style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style H stroke:#0000ff,fill:#ccccff,color:#0000ff + style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style J stroke:#0000ff,fill:#ccccff,color:#0000ff + style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style L stroke:#0000ff,fill:#ccccff,color:#0000ff + style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style N stroke:#0000ff,fill:#ccccff,color:#0000ff + `, + {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} + ); + }); it('61: fontawesome icons in edge labels', () => { imgSnapshotTest( ` diff --git a/dist/flowchart.html b/dist/flowchart.html index 9e730b501..0adebdc19 100644 --- a/dist/flowchart.html +++ b/dist/flowchart.html @@ -880,6 +880,63 @@ class D myClass2 +
+

Sample 18

+ +

graph

+
+ graph LR + A[red text] -->|default style| B(blue text) + C([red text]) -->|default style| D[[blue text]] + E[(red text)] -->|default style| F((blue text)) + G>red text] -->|default style| H{blue text} + I{{red text}} -->|default style| J[/blue text/] + K[\red text\] -->|default style| L[/blue text\] + M[\red text/] -->|default style| N[blue text] + linkStyle default color:Sienna; + style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style B stroke:#0000ff,fill:#ccccff,color:#0000ff + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style F stroke:#0000ff,fill:#ccccff,color:#0000ff + style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style H stroke:#0000ff,fill:#ccccff,color:#0000ff + style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style J stroke:#0000ff,fill:#ccccff,color:#0000ff + style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style L stroke:#0000ff,fill:#ccccff,color:#0000ff + style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style N stroke:#0000ff,fill:#ccccff,color:#0000ff +
+ +

flowchart

+
+ flowchart LR + A[red text] -->|default style| B(blue text) + C([red text]) -->|default style| D[[blue text]] + E[(red text)] -->|default style| F((blue text)) + G>red text] -->|default style| H{blue text} + I{{red text}} -->|default style| J[/blue text/] + K[\red text\] -->|default style| L[/blue text\] + M[\red text/] -->|default style| N[blue text] + linkStyle default color:Sienna; + style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style B stroke:#0000ff,fill:#ccccff,color:#0000ff + style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style D stroke:#0000ff,fill:#ccccff,color:#0000ff + style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style F stroke:#0000ff,fill:#ccccff,color:#0000ff + style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style H stroke:#0000ff,fill:#ccccff,color:#0000ff + style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style J stroke:#0000ff,fill:#ccccff,color:#0000ff + style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style L stroke:#0000ff,fill:#ccccff,color:#0000ff + style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 + style N stroke:#0000ff,fill:#ccccff,color:#0000ff +
+

Anchor for "link-clicked" test

diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index c016a7850..13fe0e337 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -20,10 +20,10 @@ const question = (parent, node) => { { x: 0, y: -s / 2 } ]; - logger.info('Question main (Circle)'); - const questionElem = insertPolygonShape(shapeSvg, s, s, points); + questionElem.attr('style', node.style); updateNodeBounds(node, questionElem); + node.intersect = function(point) { logger.warn('Intersect called'); return intersect.polygon(node, points, point); @@ -47,7 +47,9 @@ const hexagon = (parent, node) => { { x: m, y: -h }, { x: 0, y: -h / 2 } ]; + const hex = insertPolygonShape(shapeSvg, w, h, points); + hex.attr('style', node.style); updateNodeBounds(node, hex); node.intersect = function(point) { @@ -71,6 +73,7 @@ const rect_left_inv_arrow = (parent, node) => { ]; const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -79,6 +82,7 @@ const rect_left_inv_arrow = (parent, node) => { return shapeSvg; }; + const lean_right = (parent, node) => { const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); @@ -92,6 +96,7 @@ const lean_right = (parent, node) => { ]; const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -114,6 +119,7 @@ const lean_left = (parent, node) => { ]; const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -134,7 +140,9 @@ const trapezoid = (parent, node) => { { x: w - h / 6, y: -h }, { x: h / 6, y: -h } ]; + const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -155,7 +163,9 @@ const inv_trapezoid = (parent, node) => { { x: w + (2 * h) / 6, y: -h }, { x: (-2 * h) / 6, y: -h } ]; + const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -164,6 +174,7 @@ const inv_trapezoid = (parent, node) => { return shapeSvg; }; + const rect_right_inv_arrow = (parent, node) => { const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); @@ -176,7 +187,9 @@ const rect_right_inv_arrow = (parent, node) => { { x: w + h / 2, y: -h }, { x: 0, y: -h } ]; + const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { @@ -185,6 +198,7 @@ const rect_right_inv_arrow = (parent, node) => { return shapeSvg; }; + const cylinder = (parent, node) => { const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); @@ -222,6 +236,7 @@ const cylinder = (parent, node) => { const el = shapeSvg .attr('label-offset-y', ry) .insert('path', ':first-child') + .attr('style', node.style) .attr('d', shape) .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')'); @@ -277,6 +292,7 @@ const rect = (parent, node) => { return shapeSvg; }; + const rectWithTitle = (parent, node) => { // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); @@ -389,6 +405,7 @@ const stadium = (parent, node) => { // add the rect const rect = shapeSvg .insert('rect', ':first-child') + .attr('style', node.style) .attr('rx', h / 2) .attr('ry', h / 2) .attr('x', -w / 2) @@ -404,12 +421,14 @@ const stadium = (parent, node) => { return shapeSvg; }; + const circle = (parent, node) => { const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true); const circle = shapeSvg.insert('circle', ':first-child'); // center the circle around its coordinate circle + .attr('style', node.style) .attr('rx', node.rx) .attr('ry', node.ry) .attr('r', bbox.width / 2 + halfPadding) @@ -445,7 +464,9 @@ const subroutine = (parent, node) => { { x: -8, y: -h }, { x: -8, y: 0 } ]; + const el = insertPolygonShape(shapeSvg, w, h, points); + el.attr('style', node.style); updateNodeBounds(node, el); node.intersect = function(point) { From 0c724d1a88ede526e57704a1d8161ed9b1e50b11 Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Sat, 23 Jan 2021 21:48:36 +0100 Subject: [PATCH 2/3] fix integration tests --- cypress/integration/rendering/flowchart-v2.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index aba0d35d6..7ce4df146 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -434,6 +434,7 @@ flowchart TD `, {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); + }); it('63: title on subgraphs should be themable', () => { imgSnapshotTest( ` From 03edd0001436d362e19090501395c50609c3ff4a Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Sat, 23 Jan 2021 22:36:20 +0100 Subject: [PATCH 3/3] #1865 Making title color woitk when htmnlLabels are used (separated css rules for cluster text and span) --- src/diagrams/flowchart/styles.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js index 071c5378c..34ebec0e4 100644 --- a/src/diagrams/flowchart/styles.js +++ b/src/diagrams/flowchart/styles.js @@ -55,8 +55,11 @@ const getStyles = options => stroke-width: 1px; } - .cluster text,span { + .cluster text { fill: ${options.titleColor}; + } + + .cluster span { color: ${options.titleColor}; }