From b21100cc5d16bc5694d5778ebcf43722a2be81a9 Mon Sep 17 00:00:00 2001 From: Hal Wine <132412+hwine@users.noreply.github.com> Date: Sat, 3 Oct 2020 09:07:32 -0700 Subject: [PATCH 1/7] Fix typo in pie.md ':' is called a "[colon](https://en.wikipedia.org/wiki/Colon_(punctuation))" (not [semi-colon](https://en.wikipedia.org/wiki/Semicolon)) --- docs/diagrams-and-syntax-and-examples/pie.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/diagrams-and-syntax-and-examples/pie.md b/docs/diagrams-and-syntax-and-examples/pie.md index 22bade7b8..0ff549409 100644 --- a/docs/diagrams-and-syntax-and-examples/pie.md +++ b/docs/diagrams-and-syntax-and-examples/pie.md @@ -30,7 +30,7 @@ Drawing a pie chart is really simple in mermaid. - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL*** - Followed by dataSet - `label` for a section in the pie diagram within `" "` quotes. - - Followed by `:` semi-colon as separator + - Followed by `:` colon as separator - Followed by `positive numeric value` (supported upto two decimal places) [pie] From f1080996231d5186b01fc1303565c9bad3f25a7e Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 17:37:16 +0200 Subject: [PATCH 2/7] --- 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 3/7] --- .../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'} + ); + }); }); From 4812437519d01aa68529cb869acfd7b2230c218d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 17:37:16 +0200 Subject: [PATCH 4/7] --- 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 cc1560d3e328fa75c2bf06ff062d6bac9a68926b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 17:45:19 +0200 Subject: [PATCH 5/7] #1726 fix for link styling and classes for subgraph --- .../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'} + ); + }); }); From 7404e436d20dc28f1cb9d4a8c49cb1746eab0926 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 19:00:35 +0200 Subject: [PATCH 6/7] #1726 Handling think lines --- cypress/platform/knsv.html | 10 ++- src/diagrams/flowchart/flowRenderer-v2.js | 85 +++++++++++------------ 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index be2eba969..79f173081 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -24,29 +24,35 @@
graph TD + A[Christmas] ==> D A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C subgraph T ["Test"] A B + C 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; + linkStyle 0,1 color:orange, stroke: orange;
flowchart TD + A[Christmas] ==> D A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C subgraph T ["Test"] A B + C 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; + linkStyle 0,1 color:orange, stroke: orange;
flowchart TB diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 671dc460e..fbde19b44 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -193,7 +193,7 @@ export const addEdges = function(edges, g) { var linkNameStart = 'LS-' + edge.start; var linkNameEnd = 'LE-' + edge.end; - const edgeData = {}; + const edgeData = { style: '', labelStyle: '' }; edgeData.minlen = edge.length || 1; //edgeData.id = 'id' + cnt; @@ -227,45 +227,40 @@ export const addEdges = function(edges, g) { break; } - // logger.info('apa', edgeData, edge); - // edgeData.arrowTypeStart = edge.arrowTypeStart; - // edgeData.arrowTypeStart = edge.arrowTypeStart; - // edgeData.arrowType = edgeData.arrowTypeEnd; - // logger.info('apa', edgeData, edge); - let style = ''; let labelStyle = ''; + switch (edge.stroke) { + case 'normal': + style = 'fill:none;'; + if (typeof defaultStyle !== 'undefined') { + style = defaultStyle; + } + if (typeof defaultLabelStyle !== 'undefined') { + labelStyle = defaultLabelStyle; + } + edgeData.thickness = 'normal'; + edgeData.pattern = 'solid'; + break; + case 'dotted': + edgeData.thickness = 'normal'; + edgeData.pattern = 'dotted'; + edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;'; + break; + case 'thick': + edgeData.thickness = 'thick'; + edgeData.pattern = 'solid'; + edgeData.style = 'stroke-width: 3.5px;fill:none;'; + break; + } if (typeof edge.style !== 'undefined') { const styles = getStylesFromArray(edge.style); style = styles.style; labelStyle = styles.labelStyle; - } else { - switch (edge.stroke) { - case 'normal': - style = 'fill:none'; - if (typeof defaultStyle !== 'undefined') { - style = defaultStyle; - } - if (typeof defaultLabelStyle !== 'undefined') { - labelStyle = defaultLabelStyle; - } - edgeData.thickness = 'normal'; - edgeData.pattern = 'solid'; - break; - case 'dotted': - edgeData.thickness = 'normal'; - edgeData.pattern = 'dotted'; - break; - case 'thick': - edgeData.thickness = 'thick'; - edgeData.pattern = 'solid'; - break; - } } - edgeData.style = style; - edgeData.labelStyle = labelStyle; + edgeData.style = edgeData.style += style; + edgeData.labelStyle = edgeData.labelStyle += labelStyle; if (typeof edge.interpolate !== 'undefined') { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); @@ -282,21 +277,21 @@ export const addEdges = function(edges, g) { } else { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; - - if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line - edgeData.labelType = 'html'; - edgeData.label = `${edge.text}`; - } else { - edgeData.labelType = 'text'; - edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); - - if (typeof edge.style === 'undefined') { - edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; - } - - edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); - } } + // if (getConfig().flowchart.htmlLabels && false) { + // // eslint-disable-line + // edgeData.labelType = 'html'; + // edgeData.label = `${edge.text}`; + // } else { + edgeData.labelType = 'text'; + edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); + + if (typeof edge.style === 'undefined') { + edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; + } + + edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); + // } edgeData.id = linkId; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; From 4ae61ad35a29643e45782181296fa72563c531e4 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 Oct 2020 19:06:38 +0200 Subject: [PATCH 7/7] =?UTF-8?q?=E2=82=AC1726=20updated=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rendering/flowchart-v2.spec.js | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index a08099aee..4ee44b589 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -327,17 +327,21 @@ end 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; +flowchart TD + A[Christmas] ==> D + A[Christmas] -->|Get money| B(Go shopping) + A[Christmas] ==> C + subgraph T ["Test"] + A + B + C + end + + classDef Test fill:#F84E68,stroke:#333,color:white; + class A,T Test + classDef TestSub fill:green; + class T TestSub + linkStyle 0,1 color:orange, stroke: orange; `, {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} );