Skip to content

Commit

Permalink
mermaid-js#1620 Fix arrow heads to be visible for all flowchart node …
Browse files Browse the repository at this point in the history 
…shapes
  • Loading branch information
@GDFaber
GDFaber committed Jan 24, 2021
1 parent 03edd00 commit 1514ef1
Show file tree
Hide file tree
Showing 2 changed files with 194 additions and 51 deletions.
225 changes: 183 additions & 42 deletions dist/flowchart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -886,55 +886,196 @@ <h2>Sample 18</h2>
<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/>
Expand Down
20 changes: 11 additions & 9 deletions src/dagre-wrapper/nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 1514ef1

Please sign in to comment.