From 888b1fb021899f1fea88ece1af923af47b927331 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 16 Aug 2020 08:45:44 +0200
Subject: [PATCH] #1613 #1495 Adding support for edge length to flowchart
 (beta)

---
 cypress/platform/knsv.html                | 76 +++++++++++++++++++++++
 src/diagrams/flowchart/flowRenderer-v2.js |  1 +
 2 files changed, 77 insertions(+)
 create mode 100644 cypress/platform/knsv.html
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
new file mode 100644
index 000000000..2b3960f36
--- /dev/null
+++ b/cypress/platform/knsv.html
@@ -0,0 +1,76 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>info below</h1>
+    <div class="flex">
+      <div class="mermaid" style="width: 50%; height: 20%;">
+flowchart TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+graph TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C -- Label 2 ---> E2
+      C ----> E3
+      C -----> E4
+      C ======> E5
+      </div>
+
+
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        // theme: 'forest',
+        // themeVariables:{primaryColor: '#ff0000'},
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50, showSequenceNumbers: true },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"arial", sans-serif',
+        fontFamily: '"arial", sans-serif',
+        curve: 'cardinal',
+        securityLevel: 'strict'
+      });
+      function callback(){alert('It worked');}
+    </script>
+  </body>
+</html>
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index d8f0b8d32..03c795e3f 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -188,6 +188,7 @@ export const addEdges = function(edges, g) {
     var linkNameEnd = 'LE-' + edge.end;
 
     const edgeData = {};
+    edgeData.minlen = edge.length || 1;
     //edgeData.id = 'id' + cnt;
 
     // Set link type for rendering
