Improved docs, split setClickEvent and setLink

src/diagrams/flowchart/flowDb.js

@@ -137,27 +137,24 @@ export const setDirection = function (dir) {
 }
 
 /**
- * Called by parser when a graph definition is found, stores the direction of the chart.
+ * Called by parser when a special node is found, e.g. a clickable element.
- * @param dir
+ * @param ids Comma separated list of ids
+ * @param className Class to add
  */
-export const setClass = function (id, className) {
+export const setClass = function (ids, className) {
-  if (id.indexOf(',') > 0) {
+  ids.split(',').forEach(function (id) {
-    id.split(',').forEach(function (id2) {
-      if (typeof vertices[id2] !== 'undefined') {
-        vertices[id2].classes.push(className)
-      }
-    })
-  } else {
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].classes.push(className)
     }
-  }
+  })
 }
 
-const setTooltip = function (id, tooltip) {
+const setTooltip = function (ids, tooltip) {
-  if (typeof tooltip !== 'undefined') {
+  ids.split(',').forEach(function (id) {
-    tooltips[id] = tooltip
+    if (typeof tooltip !== 'undefined') {
-  }
+      tooltips[id] = tooltip
+    }
+  })
 }
 
 const setClickFun = function (id, functionName) {
@@ -176,36 +173,35 @@ const setClickFun = function (id, functionName) {
   }
 }
 
-const setLink = function (id, linkStr) {
+/**
-  if (typeof linkStr === 'undefined') {
+ * Called by parser when a link is found. Adds the URL to the vertex data.
-    return
+ * @param ids Comma separated list of ids
-  }
+ * @param linkStr URL to create a link for
-  if (typeof vertices[id] !== 'undefined') {
+ * @param tooltip Tooltip for the clickable element
-    vertices[id].link = linkStr
+ */
-  }
+export const setLink = function (ids, linkStr, tooltip) {
+  ids.split(',').forEach(function (id) {
+    if (typeof vertices[id] !== 'undefined') {
+      vertices[id].link = linkStr
+    }
+  })
+  setTooltip(ids, tooltip)
+  setClass(ids, 'clickable')
 }
 export const getTooltip = function (id) {
   return tooltips[id]
 }
 
 /**
- * Called by parser when a graph definition is found, stores the direction of the chart.
+ * Called by parser when a click definition is found. Registers an event handler.
- * @param dir
+ * @param ids Comma separated list of ids
+ * @param functionName Function to be called on click
+ * @param tooltip Tooltip for the clickable element
  */
-export const setClickEvent = function (id, functionName, link, tooltip) {
+export const setClickEvent = function (ids, functionName, tooltip) {
-  if (id.indexOf(',') > 0) {
+  ids.split(',').forEach(function (id) { setClickFun(id, functionName) })
-    id.split(',').forEach(function (id2) {
+  setTooltip(ids, tooltip)
-      setTooltip(id2, tooltip)
+  setClass(ids, 'clickable')
-      setClickFun(id2, functionName)
-      setLink(id2, link)
-      setClass(id, 'clickable')
-    })
-  } else {
-    setTooltip(id, tooltip)
-    setClickFun(id, functionName)
-    setLink(id, link)
-    setClass(id, 'clickable')
-  }
 }
 
 export const bindFunctions = function (element) {
@@ -402,6 +398,7 @@ export default {
   setClass,
   getTooltip,
   setClickEvent,
+  setLink,
   bindFunctions,
   getDirection,
   getVertices,

src/diagrams/flowchart/parser/flow.jison

@@ -396,10 +396,10 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
     ;
 
 clickStatement
-    : CLICK SPACE alphaNum SPACE alphaNum           {$$ = $1;yy.setClickEvent($3,        $5, undefined, undefined);}
+    : CLICK SPACE alphaNum SPACE alphaNum           {$$ = $1;yy.setClickEvent($3, $5, undefined);}
-    | CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3,        $5, undefined, $7)       ;}
+    | CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7)       ;}
-    | CLICK SPACE alphaNum SPACE STR                {$$ = $1;yy.setClickEvent($3, undefined,        $5, undefined);}
+    | CLICK SPACE alphaNum SPACE STR                {$$ = $1;yy.setLink($3, $5, undefined);}
-    | CLICK SPACE alphaNum SPACE STR SPACE STR      {$$ = $1;yy.setClickEvent($3, undefined,        $5, $7       );}
+    | CLICK SPACE alphaNum SPACE STR SPACE STR      {$$ = $1;yy.setLink($3, $5, $7       );}
     ;
 
 styleStatement:STYLE SPACE alphaNum SPACE stylesOpt

src/diagrams/flowchart/parser/flow.js

@@ -271,16 +271,16 @@ case 112:
 this.$ = $$[$0-4];yy.setClass($$[$0-2], $$[$0]);
 break;
 case 113:
-this.$ = $$[$0-4];yy.setClickEvent($$[$0-2],        $$[$0], undefined, undefined);
+this.$ = $$[$0-4];yy.setClickEvent($$[$0-2], $$[$0], undefined);
 break;
 case 114:
-this.$ = $$[$0-6];yy.setClickEvent($$[$0-4],        $$[$0-2], undefined, $$[$0])       ;
+this.$ = $$[$0-6];yy.setClickEvent($$[$0-4], $$[$0-2], $$[$0])       ;
 break;
 case 115:
-this.$ = $$[$0-4];yy.setClickEvent($$[$0-2], undefined,        $$[$0], undefined);
+this.$ = $$[$0-4];yy.setLink($$[$0-2], $$[$0], undefined);
 break;
 case 116:
-this.$ = $$[$0-6];yy.setClickEvent($$[$0-4], undefined,        $$[$0-2], $$[$0]       );
+this.$ = $$[$0-6];yy.setLink($$[$0-4], $$[$0-2], $$[$0]       );
 break;
 case 117:
 this.$ = $$[$0-4];yy.addVertex($$[$0-2],undefined,undefined,$$[$0]);

src/diagrams/flowchart/parser/flow.spec.js

@@ -486,7 +486,7 @@ describe('when parsing ', function () {
       const vert = flow.parser.yy.getVertices()
       const edges = flow.parser.yy.getEdges()
 
-      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined, undefined)
+      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined)
     })
 
     it('it should be possible to use click to a callback with toolip', function () {
@@ -496,26 +496,26 @@ describe('when parsing ', function () {
       const vert = flow.parser.yy.getVertices()
       const edges = flow.parser.yy.getEdges()
 
-      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', undefined, 'tooltip')
+      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback', 'tooltip')
     })
 
     it('should handle interaction - click to a link', function () {
-      spyOn(flowDb, 'setClickEvent')
+      spyOn(flowDb, 'setLink')
       const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html"')
 
       const vert = flow.parser.yy.getVertices()
       const edges = flow.parser.yy.getEdges()
 
-      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', undefined, 'click.html', undefined)
+      expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined)
     })
     it('should handle interaction - click to a link with tooltip', function () {
-      spyOn(flowDb, 'setClickEvent')
+      spyOn(flowDb, 'setLink')
       const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip"')
 
       const vert = flow.parser.yy.getVertices()
       const edges = flow.parser.yy.getEdges()
 
-      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', undefined, 'click.html', 'tooltip')
+      expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip')
     })
   })