diff --git a/dist/flowchart.html b/dist/flowchart.html index 0adebdc19..a8d8d21a2 100644 --- a/dist/flowchart.html +++ b/dist/flowchart.html @@ -886,55 +886,196 @@

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] + 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

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] + 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 +
+ +
+

Sample 19

+ +

graph

+
+ 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 +
+ +

flowchart

+
+ 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

diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index 13fe0e337..c422dd4d9 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -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;