GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +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'`. 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 * nodeId is the id of the node
@ -620,8 +620,8 @@ Examples of tooltip usage below:
``` ```
graph LR; graph LR;
A-->B; 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. 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 ```mermaid
graph LR graph LR
A-->B; 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. > **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; graph LR;
A-->B; A-->B;
B-->C; 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 ```mermaid
graph LR; graph LR;
A-->B; A-->B;
B-->C; 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: 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"> <div class="mermaid">
graph LR; graph LR;
A-->B; 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> </div>
<script> <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() { it('it should be possible to use click to a callback with toolip', function() {
spyOn(flowDb, 'setClickEvent'); spyOn(flowDb, 'setClickEvent');
spyOn(flowDb, 'setTooltip'); 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 vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges(); const edges = flow.parser.yy.getEdges();
@ -34,6 +34,16 @@ describe('[Interactions] when parsing', () => {
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip'); 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() { it('should handle interaction - click to a link', function() {
spyOn(flowDb, 'setLink'); spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html"'); 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.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip'); expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
}); });
}); });