update diagrams and syntax and examples

add test for multiple arguments

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -601,7 +601,7 @@ flowchart TB
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 ```
-click nodeId callback
+click nodeId call callback
 ```
 
 * nodeId is the id of the node
@@ -620,8 +620,8 @@ Examples of tooltip usage below:
 ```
 graph LR;
     A-->B;
-    click A callback "Tooltip for a callback"
+    click A call callback "Tooltip for a callback"
-    click B "http://www.github.com" "This is a tooltip for a link"
+    click B href "http://www.github.com" "This is a tooltip for a link"
 ```
 
 The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
@@ -629,8 +629,8 @@ The tooltip text is surrounded in double quotes. The styles of the tooltip are s
 ```mermaid
 graph LR
     A-->B;
-    click A callback "Tooltip"
+    click A call callback "Tooltip"
-    click B "http://www.github.com" "This is a link"
+    click B href "http://www.github.com" "This is a link"
 ```
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
@@ -641,16 +641,16 @@ Links are opened in the same browser tab/window by default. It is possible to ch
 graph LR;
     A-->B;
     B-->C;
-    click A "http://www.github.com" _blank
+    click A href "http://www.github.com" _blank
-    click B "http://www.github.com" "Open this in a new tab" _blank
+    click B href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 ```mermaid
 graph LR;
     A-->B;
     B-->C;
-    click A "http://www.github.com" _blank
+    click A href "http://www.github.com" _blank
-    click B "http://www.github.com" "Open this in a new tab" _blank
+    click B href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 Beginners tip, a full example using interactive links in a html context:
@@ -659,8 +659,8 @@ Beginners tip, a full example using interactive links in a html context:
   <div class="mermaid">
     graph LR;
         A-->B;
-        click A callback "Tooltip"
+        click A call callback "Tooltip"
-        click B "http://www.github.com" "This is a link"
+        click B href "http://www.github.com" "This is a link"
   </div>
 
   <script>

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

@@ -25,7 +25,7 @@ describe('[Interactions] when parsing', () => {
   it('it should be possible to use click to a callback with toolip', function() {
     spyOn(flowDb, 'setClickEvent');
     spyOn(flowDb, 'setTooltip');
-    const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback() "tooltip"');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback "tooltip"');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -34,6 +34,16 @@ describe('[Interactions] when parsing', () => {
     expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
   });
 
+  it('it should be possible to use click to a callback with an arbitrary number of args', function() {
+      spyOn(flowDb, 'setClickEvent');
+      const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback("test0", test1, test2)');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback','"test0", test1, test2');
+    });
+
   it('should handle interaction - click to a link', function() {
     spyOn(flowDb, 'setLink');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html"');
@@ -77,4 +87,5 @@ describe('[Interactions] when parsing', () => {
     expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
     expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
   });
+
 });