Merge pull request #598 from thomasleveil/pr/426

fix #426 - add class .clickable on nodes with click function or link

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>

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

src/less/dark/flow.less

@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }

src/less/default/flow.less

@@ -11,6 +11,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }

src/less/forest/flow.less

@@ -12,6 +12,10 @@
   stroke-width: 1px;
 }
 
+.node.clickable {
+  cursor: pointer;
+}
+
 .arrowheadPath {
   fill: @arrowheadColor;
 }