mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
#1620 Fix arrow heads to be visible for all flowchart node shapes
This commit is contained in:
Marc Faber
parent
03edd00014
commit
1514ef18ec
225
dist/flowchart.html
vendored
225
dist/flowchart.html
vendored
@ -886,55 +886,196 @@
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
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]
|
||||
A1[red text] -->|default style| A2[blue text]
|
||||
B1(red text) -->|default style| B2(blue text)
|
||||
C1([red text]) -->|default style| C2([blue text])
|
||||
D1[[red text]] -->|default style| D2[[blue text]]
|
||||
E1[(red text)] -->|default style| E2[(blue text)]
|
||||
F1((red text)) -->|default style| F2((blue text))
|
||||
G1>red text] -->|default style| G2>blue text]
|
||||
H1{red text} -->|default style| H2{blue text}
|
||||
I1{{red text}} -->|default style| I2{{blue text}}
|
||||
J1[/red text/] -->|default style| J2[/blue text/]
|
||||
K1[\red text\] -->|default style| K2[\blue text\]
|
||||
L1[/red text\] -->|default style| L2[/blue text\]
|
||||
M1[\red text/] -->|default style| M2[\blue text/]
|
||||
N1[red text] -->|default style| N2[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
|
||||
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
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]
|
||||
A1[red text] <-->|default style| A2[blue text]
|
||||
B1(red text) <-->|default style| B2(blue text)
|
||||
C1([red text]) <-->|default style| C2([blue text])
|
||||
D1[[red text]] <-->|default style| D2[[blue text]]
|
||||
E1[(red text)] <-->|default style| E2[(blue text)]
|
||||
F1((red text)) <-->|default style| F2((blue text))
|
||||
G1>red text] <-->|default style| G2>blue text]
|
||||
H1{red text} <-->|default style| H2{blue text}
|
||||
I1{{red text}} <-->|default style| I2{{blue text}}
|
||||
J1[/red text/] <-->|default style| J2[/blue text/]
|
||||
K1[\red text\] <-->|default style| K2[\blue text\]
|
||||
L1[/red text\] <-->|default style| L2[/blue text\]
|
||||
M1[\red text/] <-->|default style| M2[\blue text/]
|
||||
N1[red text] <-->|default style| N2[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
|
||||
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 19</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
graph TB
|
||||
A1[red text] -->|default style| A2[blue text]
|
||||
B1(red text) -->|default style| B2(blue text)
|
||||
C1([red text]) -->|default style| C2([blue text])
|
||||
D1[[red text]] -->|default style| D2[[blue text]]
|
||||
E1[(red text)] -->|default style| E2[(blue text)]
|
||||
F1((red text)) -->|default style| F2((blue text))
|
||||
G1>red text] -->|default style| G2>blue text]
|
||||
H1{red text} -->|default style| H2{blue text}
|
||||
I1{{red text}} -->|default style| I2{{blue text}}
|
||||
J1[/red text/] -->|default style| J2[/blue text/]
|
||||
K1[\red text\] -->|default style| K2[\blue text\]
|
||||
L1[/red text\] -->|default style| L2[/blue text\]
|
||||
M1[\red text/] -->|default style| M2[\blue text/]
|
||||
N1[red text] -->|default style| N2[blue text]
|
||||
linkStyle default color:Sienna;
|
||||
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
flowchart TB
|
||||
A1[red text] <-->|default style| A2[blue text]
|
||||
B1(red text) <-->|default style| B2(blue text)
|
||||
C1([red text]) <-->|default style| C2([blue text])
|
||||
D1[[red text]] <-->|default style| D2[[blue text]]
|
||||
E1[(red text)] <-->|default style| E2[(blue text)]
|
||||
F1((red text)) <-->|default style| F2((blue text))
|
||||
G1>red text] <-->|default style| G2>blue text]
|
||||
H1{red text} <-->|default style| H2{blue text}
|
||||
I1{{red text}} <-->|default style| I2{{blue text}}
|
||||
J1[/red text/] <-->|default style| J2[/blue text/]
|
||||
K1[\red text\] <-->|default style| K2[\blue text\]
|
||||
L1[/red text\] <-->|default style| L2[/blue text\]
|
||||
M1[\red text/] <-->|default style| M2[\blue text/]
|
||||
N1[red text] <-->|default style| N2[blue text]
|
||||
linkStyle default color:Sienna;
|
||||
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
@ -53,7 +53,7 @@ const hexagon = (parent, node) => {
|
||||
updateNodeBounds(node, hex);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -74,10 +74,12 @@ const rect_left_inv_arrow = (parent, node) => {
|
||||
|
||||
const el = insertPolygonShape(shapeSvg, w, h, points);
|
||||
el.attr('style', node.style);
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.width = w + h;
|
||||
node.height = h;
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -100,7 +102,7 @@ const lean_right = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -123,7 +125,7 @@ const lean_left = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -146,7 +148,7 @@ const trapezoid = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -169,7 +171,7 @@ const inv_trapezoid = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -193,7 +195,7 @@ const rect_right_inv_arrow = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
@ -470,7 +472,7 @@ const subroutine = (parent, node) => {
|
||||
updateNodeBounds(node, el);
|
||||
|
||||
node.intersect = function(point) {
|
||||
return intersect.polygon(node, point);
|
||||
return intersect.polygon(node, points, point);
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user