GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

#1726 Handling think lines

Browse Source
This commit is contained in:
Knut Sveidqvist 2020-10-15 19:00:35 +02:00
parent cc1560d3e3
commit 7404e436d2
2 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/platform/knsv.html
View File

@ -24,29 +24,35 @@
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 50%; height: 400px;">
graph TD graph TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"] subgraph T ["Test"]
A A
B B
C
end end
classDef Test fill:#F84E68,stroke:#333,color:white; classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test class A,T Test
classDef TestSub fill:green; classDef TestSub fill:green;
class T TestSub class T TestSub
linkStyle 0 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 50%; height: 400px;">
flowchart TD flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"] subgraph T ["Test"]
A A
B B
C
end end
classDef Test fill:#F84E68,stroke:#333,color:white; classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test class A,T Test
classDef TestSub fill:green; classDef TestSub fill:green;
class T TestSub class T TestSub
linkStyle 0 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TB flowchart TB

41
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -193,7 +193,7 @@ export const addEdges = function(edges, g) {
var linkNameStart = 'LS-' + edge.start; var linkNameStart = 'LS-' + edge.start;
var linkNameEnd = 'LE-' + edge.end; var linkNameEnd = 'LE-' + edge.end;
const edgeData = {}; const edgeData = { style: '', labelStyle: '' };
edgeData.minlen = edge.length || 1; edgeData.minlen = edge.length || 1;
//edgeData.id = 'id' + cnt; //edgeData.id = 'id' + cnt;
@ -227,23 +227,12 @@ export const addEdges = function(edges, g) {
break; 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 style = '';
let labelStyle = ''; let labelStyle = '';
if (typeof edge.style !== 'undefined') {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
} else {
switch (edge.stroke) { switch (edge.stroke) {
case 'normal': case 'normal':
style = 'fill:none'; style = 'fill:none;';
if (typeof defaultStyle !== 'undefined') { if (typeof defaultStyle !== 'undefined') {
style = defaultStyle; style = defaultStyle;
} }
@ -256,16 +245,22 @@ export const addEdges = function(edges, g) {
case 'dotted': case 'dotted':
edgeData.thickness = 'normal'; edgeData.thickness = 'normal';
edgeData.pattern = 'dotted'; edgeData.pattern = 'dotted';
edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
break; break;
case 'thick': case 'thick':
edgeData.thickness = 'thick'; edgeData.thickness = 'thick';
edgeData.pattern = 'solid'; edgeData.pattern = 'solid';
edgeData.style = 'stroke-width: 3.5px;fill:none;';
break; break;
} }
if (typeof edge.style !== 'undefined') {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
} }
edgeData.style = style; edgeData.style = edgeData.style += style;
edgeData.labelStyle = labelStyle; edgeData.labelStyle = edgeData.labelStyle += labelStyle;
if (typeof edge.interpolate !== 'undefined') { if (typeof edge.interpolate !== 'undefined') {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
@ -282,21 +277,21 @@ export const addEdges = function(edges, g) {
} else { } else {
edgeData.arrowheadStyle = 'fill: #333'; edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c'; edgeData.labelpos = 'c';
}
if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line // if (getConfig().flowchart.htmlLabels && false) {
edgeData.labelType = 'html'; // // eslint-disable-line
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`; // edgeData.labelType = 'html';
} else { // edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
// } else {
edgeData.labelType = 'text'; edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') { if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none'; edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
} }
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
} // }
}
edgeData.id = linkId; edgeData.id = linkId;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;