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

@@ -39,7 +39,7 @@
         G-->H
         G-->c
       </div>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart LR
     A{{A}}-->B{{B}};
     click A callback "Tooltip"
@@ -47,8 +47,12 @@ flowchart LR
 
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
-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]
 
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">

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"

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]);

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);
   });
 

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;

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':