From c21b61bbd2a4e50cdf6bf624801577f76eac04ef Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 16 May 2020 19:58:22 +0200 Subject: [PATCH] Bug fixes in new functionality, intersections not taken into account in nodes used by new graph engine. Graph flowchart not usable when integrating using mermaid.core. Incorrect flwochart docs --- cypress/platform/current.html | 10 ++-- docs/flowchart.md | 90 +++++++++++++++++------------------ src/dagre-wrapper/edges.js | 15 +++++- src/dagre-wrapper/index.js | 2 +- src/dagre-wrapper/nodes.js | 5 +- src/mermaidAPI.js | 2 +- 6 files changed, 70 insertions(+), 54 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index 7bfa3ab8d..029497218 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -39,7 +39,7 @@ G-->H G-->c -
+
flowchart LR A{{A}}-->B{{B}}; click A callback "Tooltip" @@ -47,8 +47,12 @@ flowchart LR
-flowchart LR - A{{A}}-->B{{B}}; +flowchart TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[fa:fa-car Car]
diff --git a/docs/flowchart.md b/docs/flowchart.md index 40d8b2ec3..a053c1965 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -65,7 +65,7 @@ graph LR id1[This is the text in the box] ``` ```mermaid -flowchart LR +graph LR id1[This is the text in the box] ``` @@ -73,66 +73,66 @@ flowchart LR ### A node with round edges ``` -flowchart LR +graph LR id1(This is the text in the box) ``` ```mermaid -flowchart LR +graph LR id1(This is the text in the box) ``` ### A stadium-shaped node ``` -flowchart LR +graph LR id1([This is the text in the box]) ``` ```mermaid -flowchart LR +graph LR id1([This is the text in the box]) ``` ### A node in a subroutine shape ``` -flowchart LR +graph LR id1[[This is the text in the box]] ``` ```mermaid -flowchart LR +graph LR id1[[This is the text in the box]] ``` ### A node in a cylindrical shape ``` -flowchart LR +graph LR id1[(Database)] ``` ```mermaid -flowchart LR +graph LR id1[(Database)] ``` ### A node in the form of a circle ``` -flowchart LR +graph LR id1((This is the text in the circle)) ``` ```mermaid -flowchart LR +graph LR id1((This is the text in the circle)) ``` ### A node in an asymetric shape ``` -flowchart LR +graph LR id1>This is the text in the box] ``` ```mermaid -flowchart LR +graph LR id1>This is the text in the box] ``` Currently only the shape above is possible and not its mirror. *This might change with future releases.* @@ -140,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang ### A node (rhombus) ``` -flowchart LR +graph LR id1{This is the text in the box} ``` ```mermaid -flowchart LR +graph LR id1{This is the text in the box} ``` ### A hexagon node ``` -flowchart LR +graph LR id1{{This is the text in the box}} ``` ```mermaid -flowchart LR +graph LR id1{{This is the text in the box}} ``` @@ -209,22 +209,22 @@ Nodes can be connected with links/edges. It is possible to have different types ### A link with arrow head ``` -flowchart LR +graph LR A-->B ``` ```mermaid -flowchart LR +graph LR A-->B ``` ### An open link ``` -flowchart LR +graph LR A --- B ``` ```mermaid -flowchart LR +graph LR A --- B ``` @@ -235,84 +235,84 @@ graph LR A-- This is the text! ---B ``` ```mermaid -flowchart LR +graph LR A-- This is the text ---B ``` or ``` -flowchart LR +graph LR A---|This is the text|B ``` ```mermaid -flowchart LR +graph LR A---|This is the text|B ``` ### A link with arrow head and text ``` -flowchart LR +graph LR A-->|text|B ``` ```mermaid -flowchart LR +graph LR A-->|text|B ``` or ``` -flowchart LR +graph LR A-- text -->B ``` ```mermaid -flowchart LR +graph LR A-- text -->B ``` ### Dotted link ``` -flowchart LR; +graph LR; A-.->B; ``` ```mermaid -flowchart LR; +graph LR; A-.->B; ``` ### Dotted link with text ``` -flowchart LR +graph LR A-. text .-> B ``` ```mermaid -flowchart LR +graph LR A-. text .-> B ``` ### Thick link ``` -flowchart LR +graph LR A ==> B ``` ```mermaid -flowchart LR +graph LR A ==> B ``` ### Thick link with text ``` -flowchart LR +graph LR A == text ==> B ``` ```mermaid -flowchart LR +graph LR A == text ==> B ``` @@ -320,21 +320,21 @@ flowchart LR It is possible declare many links in the same line as per below: ``` -flowchart LR +graph LR A -- text --> B -- text2 --> C ``` ```mermaid -flowchart LR +graph LR A -- text --> B -- text2 --> C ``` It is also possible to declare multiple nodes links in the same line as per below: ``` -flowchart LR +graph LR a --> b & c--> d ``` ```mermaid -flowchart LR +graph LR a --> b & c--> d ``` @@ -399,11 +399,11 @@ flowchart LR It is possible to put text within quotes in order to render more troublesome characters. As in the example below: ``` -flowchart LR +graph LR id1["This is the (text) in the box"] ``` ```mermaid -flowchart LR +graph LR id1["This is the (text) in the box"] ``` @@ -412,11 +412,11 @@ flowchart LR It is possible to escape characters using the syntax examplified here. ``` - flowchart LR + graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` ```mermaid - flowchart LR + graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` @@ -534,7 +534,7 @@ Examples of tooltip usage below: ``` ``` -flowchart LR; +graph LR; A-->B; click A callback "Tooltip for a callback" click B "http://www.github.com" "This is a tooltip for a link" diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index d3db26372..663ef529b 100644 --- a/src/dagre-wrapper/edges.js +++ b/src/dagre-wrapper/edges.js @@ -1,6 +1,6 @@ import { logger } from '../logger'; // eslint-disable-line import createLabel from './createLabel'; -import { line, curveBasis } from 'd3'; +import { line, svg, curveBasis } from 'd3'; import { getConfig } from '../config'; let edgeLabels = {}; @@ -100,8 +100,19 @@ const intersection = (node, outsidePoint, insidePoint) => { } }; -export const insertEdge = function(elem, edge, clusterDb, diagramType) { +//(edgePaths, e, edge, clusterDb, diagramtype, graph) +export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) { let points = edge.points; + + const tail = graph.node(e.v); + var head = graph.node(e.w); + + if (head.intersect && tail.intersect) { + points = points.slice(1, edge.points.length - 1); + + points.unshift(tail.intersect(points[0])); + points.push(head.intersect(points[points.length - 1])); + } if (edge.toCluster) { logger.trace('edge', edge); logger.trace('to cluster', clusterDb[edge.toCluster]); diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js index 65ca06aea..bcc121625 100644 --- a/src/dagre-wrapper/index.js +++ b/src/dagre-wrapper/index.js @@ -124,7 +124,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => { const edge = graph.edge(e); log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); - insertEdge(edgePaths, edge, clusterDb, diagramtype); + insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph); positionEdgeLabel(edge); }); diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index c66f02be9..8d6057b1d 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -10,7 +10,7 @@ const question = (parent, node) => { const w = bbox.width + node.padding; const h = bbox.height + node.padding; - const s = (w + h) * 0.9; + const s = w + h; const points = [ { x: s / 2, y: 0 }, { x: s, y: -s / 2 }, @@ -21,7 +21,8 @@ const question = (parent, node) => { const questionElem = insertPolygonShape(shapeSvg, s, s, points); updateNodeBounds(node, questionElem); node.intersect = function(point) { - return intersect.polugon(node, points, point); + logger.warn('Intersect called'); + return intersect.polygon(node, points, point); }; return shapeSvg; diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index a18a86d31..4373f2b87 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -551,7 +551,7 @@ function parse(text) { break; case 'flowchart-v2': flowDb.clear(); - parser = flowRendererV2; + parser = flowParser; parser.parser.yy = flowDb; break; case 'sequence':