From 8db7d73dc06df7c71f4fb47bfcc4db58f33a6d85 Mon Sep 17 00:00:00 2001
From: Thomas LEVEIL <thomasleveil@gmail.com>
Date: Sun, 3 Dec 2017 03:45:55 +0100
Subject: [PATCH 1/3] add quick test for clickable flow chart node with tooltip

---
 dist/index.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index 6609d63852..da7b4441b2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -14,6 +14,8 @@
 C -->|One| D[Laptop]
 C -->|Two| E[iPhone]
 C -->|Three| F[Car]
+click A "index.html#link-clicked" "link test"
+click B testClick "click test"
   </div>
 
   <hr/>
@@ -101,5 +103,18 @@
   <script>
     mermaid.initialize({startOnLoad: true, theme: 'forest'});
   </script>
+  <script>
+    function testClick(nodeId) {
+      console.log("clicked", nodeId);
+      var originalBgColor = document.querySelector('body').style.backgroundColor;
+      document.querySelector('body').style.backgroundColor = 'yellow';
+      setTimeout(function() {
+        document.querySelector('body').style.backgroundColor = originalBgColor;
+      }, 100);
+
+    }
+
+  </script>
+
 </body>
 </html>

From e0f74690b0d73f692d2339271bc99729f4fb4a9c Mon Sep 17 00:00:00 2001
From: Thomas LEVEIL <thomasleveil@gmail.com>
Date: Sun, 3 Dec 2017 04:17:56 +0100
Subject: [PATCH 2/3] flowchart: add class 'clickable' on vertices with link or
 click function

---
 src/diagrams/flowchart/graphDb.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/diagrams/flowchart/graphDb.js b/src/diagrams/flowchart/graphDb.js
index 880695d290..d7aca48014 100644
--- a/src/diagrams/flowchart/graphDb.js
+++ b/src/diagrams/flowchart/graphDb.js
@@ -204,11 +204,13 @@ export const setClickEvent = function (id, functionName, link, tooltip) {
       setTooltip(id2, tooltip)
       setClickFun(id2, functionName)
       setLink(id2, link)
+      setClass(id, 'clickable')
     })
   } else {
     setTooltip(id, tooltip)
     setClickFun(id, functionName)
     setLink(id, link)
+    setClass(id, 'clickable')
   }
 }
 

From 8cd0e3bb054892b2e8ccc7987a6fcd8e5850710c Mon Sep 17 00:00:00 2001
From: Thomas LEVEIL <thomasleveil@gmail.com>
Date: Sun, 3 Dec 2017 04:29:28 +0100
Subject: [PATCH 3/3] flowchart css: add cursor pointer style for class
 .clickable

---
 src/less/dark/flow.less    | 4 ++++
 src/less/default/flow.less | 4 ++++
 src/less/forest/flow.less  | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less
index dcabafdd0c..ac833b34e6 100644
--- a/src/less/dark/flow.less
+++ b/src/less/dark/flow.less
@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }
diff --git a/src/less/default/flow.less b/src/less/default/flow.less
index aa97b01775..7a9ead9295 100644
--- a/src/less/default/flow.less
+++ b/src/less/default/flow.less
@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }
diff --git a/src/less/forest/flow.less b/src/less/forest/flow.less
index 2b3469b6ed..e7602646a0 100644
--- a/src/less/forest/flow.less
+++ b/src/less/forest/flow.less
@@ -12,6 +12,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }