GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

update diagrams and syntax and examples

Browse Source 
add test for multiple arguments
This commit is contained in:
Matthieu MOREL 2020-12-06 14:04:46 +01:00
parent 40cf4dfee4
commit e7852ea54e
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@ -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 B "http://www.github.com" "This is a tooltip for a link"
click A call callback "Tooltip for a callback"
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 B "http://www.github.com" "This is a link"
click A call callback "Tooltip"
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 B "http://www.github.com" "Open this in a new tab" _blank
click A href "http://www.github.com" _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 B "http://www.github.com" "Open this in a new tab" _blank
click A href "http://www.github.com" _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 B "http://www.github.com" "This is a link"
click A call callback "Tooltip"
click B href "http://www.github.com" "This is a link"
</div>
<script>

13
src/diagrams/flowchart/parser/flow-interactions.spec.js
View File

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