marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 06:20:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

Handle old and new syntax

Browse Source
This commit is contained in:
Matthieu MOREL
2020-12-10 08:50:16 +01:00
parent f03efefac5
commit 93f15a507b
8 changed files with 160 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/platform/class.html
View File

@@ -69,7 +69,7 @@
int id
test()
}
click Class01 call callback() "A Tooltip"
callback Class01 "callback" "A Tooltip"
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">

8
cypress/platform/click_security_loose.html
View File

@@ -41,16 +41,16 @@
<div id="FirstLine" class="mermaid">
classDiagram
class ShapeLink
click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback
click ShapeCallback call clickByClass() "This is a tooltip for a callback"
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div>
<div id="FirstLine" class="mermaid">
classDiagram-v2
class ShapeLink2
click ShapeLink2 href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2
click ShapeCallback2 call clickByClass() "This is a tooltip for a callback"
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div>
</div>

8
cypress/platform/interaction.html
View File

@@ -30,19 +30,19 @@
classDiagram
class Test
class ShapeLink
click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback
click ShapeCallback call clickByClass() "This is a tooltip for a callback"
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div>
<div id="FirstLine" class="mermaid">
classDiagram-v2
class ShapeCallback
click ShapeCallback call clickByClass() "This is a tooltip for a callback"
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div>
<div id="FirstLine" class="mermaid">
classDiagram-v2
class ShapeLink
click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
</div>
</div>

24
docs/classDiagram.md
View File

@@ -450,11 +450,13 @@ It is possible to bind a click event to a node, the click can lead to either a j
You would define these actions on a separate line after all classes have been declared.
```
action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
```
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
- _className_ is the id of the node that the action will be associated with
- _reference_ is either the url link, or the function name for callback.
- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
- note: callback function will be called with the nodeId as parameter.
@@ -465,7 +467,9 @@ _URL Link:_
```
classDiagram
class Shape
click Shape href "http://www.github.com" "This is a tooltip for a link"
link Shape "http://www.github.com" "This is a tooltip for a link"
class Shape2
click Shape2 href "http://www.github.com" "This is a tooltip for a link"
```
_Callback:_
@@ -473,7 +477,9 @@ _Callback:_
```
classDiagram
class Shape
click Shape call callbackFunction() "This is a tooltip for a callback"
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"
```
```
@@ -488,8 +494,12 @@ click Shape call callbackFunction() "This is a tooltip for a callback"
classDiagram
class Class01
class Class02
click Class01 call callbackFunction() "Callback tooltip"
click Class02 href "http://www.github.com" "This is a link"
callback Class01 "callbackFunction" "Callback tooltip"
link Class02 "http://www.github.com" "This is a link"
class Class03
class Class04
click Class03 call callbackFunction() "Callback tooltip"
click Class04 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.
@@ -521,8 +531,8 @@ Beginners tip, a full example using interactive links in an html context:
+run()
}
click Duck call callback() "Tooltip"
click Zebra href "http://www.github.com" "This is a link"
callback Duck callback "Tooltip"
link Zebra "http://www.github.com" "This is a link"
</div>
<script>

10
src/diagrams/class/classDb.js
View File

@@ -185,15 +185,21 @@ const setTooltip = function(ids, tooltip) {
* Called by parser when a link is found. Adds the URL to the vertex data.
* @param ids Comma separated list of ids
* @param linkStr URL to create a link for
* @param tooltip Tooltip for the clickable element
* @param target Target of the link, _blank by default as originally defined in the svgDraw.js file
*/
export const setLink = function(ids, linkStr) {
export const setLink = function(ids, linkStr, target) {
const config = configApi.getConfig();
ids.split(',').forEach(function(_id) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof classes[id] !== 'undefined') {
classes[id].link = utils.formatUrl(linkStr, config);
if (typeof target === 'string') {
classes[id].linkTarget = target
}else{
classes[id].linkTarget ='_blank'
}
}
});
setCssClass(ids, 'clickable');

101
src/diagrams/class/classDiagram.spec.js
View File

@@ -338,11 +338,26 @@ foo()
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 href "google.com" ';
'link Class01 "google.com" ';
parser.parse(str);
});
it('should handle click statement with click and href link', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 href "google.com" ';
parser.parse(str);
});
it('should handle click statement with link and tooltip', function () {
const str =
'classDiagram\n' +
@@ -353,11 +368,27 @@ foo()
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 href "google.com" "A Tooltip" ';
'link Class01 "google.com" "A Tooltip" ';
parser.parse(str);
});
it('should handle click statement with click and href link and tooltip', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 href "google.com" "A Tooltip" ';
parser.parse(str);
});
it('should handle click statement with callback', function () {
const str =
'classDiagram\n' +
@@ -368,11 +399,26 @@ foo()
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 call functionCall() ';
'callback Class01 "functionCall" ';
parser.parse(str);
});
it('should handle click statement with click and call callback', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 call functionCall() ';
parser.parse(str);
});
it('should handle click statement with callback and tooltip', function () {
const str =
'classDiagram\n' +
@@ -383,11 +429,26 @@ foo()
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 call functionCall() "A Tooltip" ';
'callback Class01 "functionCall" "A Tooltip" ';
parser.parse(str);
});
it('should handle click statement with click and call callback and tooltip', function () {
const str =
'classDiagram\n' +
'class Class1 {\n' +
'%% Comment Class01 <|-- Class02\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}\n' +
'click Class01 call functionCall() "A Tooltip" ';
parser.parse(str);
});
it('should handle dashed relation definition of different types and directions', function () {
const str =
'classDiagram\n' +
@@ -637,6 +698,16 @@ foo()
});
it('should associate link and css appropriately', function () {
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com"';
parser.parse(str);
const testClass = parser.yy.getClass('Class1');
expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
expect(testClass.cssClasses.length).toBe(1);
expect(testClass.cssClasses[0]).toBe('clickable');
});
it('should associate click and href link and css appropriately', function () {
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com"';
parser.parse(str);
@@ -647,7 +718,7 @@ foo()
});
it('should associate link with tooltip', function () {
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip"';
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip"';
parser.parse(str);
const testClass = parser.yy.getClass('Class1');
@@ -657,7 +728,27 @@ foo()
expect(testClass.cssClasses[0]).toBe('clickable');
});
it('should associate click and href link with tooltip', function () {
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip"';
parser.parse(str);
const testClass = parser.yy.getClass('Class1');
expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
expect(testClass.tooltip).toBe('A tooltip');
expect(testClass.cssClasses.length).toBe(1);
expect(testClass.cssClasses[0]).toBe('clickable');
});
it('should associate callback appropriately', function () {
spyOn(classDb, 'setClickEvent');
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';
parser.parse(str);
expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
});
it('should associate click and call callback appropriately', function () {
spyOn(classDb, 'setClickEvent');
const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 call functionCall()';
parser.parse(str);

43
src/diagrams/class/parser/classDiagram.jison
View File

@@ -10,8 +10,8 @@
%x generic
%x struct
%x href
%x callbackname
%x callbackargs
%x callback_name
%x callback_args
%x open_directive
%x type_directive
%x arg_directive
@@ -37,6 +37,8 @@
"class" return 'CLASS';
"cssClass" return 'CSSCLASS';
"callback" return 'CALLBACK';
"link" return 'LINK';
"click" return 'CLICK';
"<<" return 'ANNOTATION_START';
">>" return 'ANNOTATION_END';
@@ -61,16 +63,21 @@ line was introduced with 'click'.
---interactivity command---
'call' adds a callback to the specified node. 'call' can only be specified when
the line was introduced with 'click'.
'call <callbackname>(<args>)' attaches the function 'callbackname' with the specified
'call <callback_name>(<callback_args>)' attaches the function 'callback_name' with the specified
arguments to the node that was specified by 'click'.
Function arguments are optional: 'call <callbackname>()' simply executes 'callbackname' without any arguments.
Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
*/
"call"[\s]+ this.begin("callbackname");
<callbackname>\([\s]*\) this.popState();
<callbackname>\( this.popState(); this.begin("callbackargs");
<callbackname>[^(]* return 'CALLBACKNAME';
<callbackargs>\) this.popState();
<callbackargs>[^)]* return 'CALLBACKARGS';
"call"[\s]+ this.begin("callback_name");
<callback_name>\([\s]*\) this.popState();
<callback_name>\( this.popState(); this.begin("callback_args");
<callback_name>[^(]* return 'CALLBACK_NAME';
<callback_args>\) this.popState();
<callback_args>[^)]* return 'CALLBACK_ARGS';
"_self" return 'LINK_TARGET';
"_blank" return 'LINK_TARGET';
"_parent" return 'LINK_TARGET';
"_top" return 'LINK_TARGET';
\s*\<\| return 'EXTENSION';
\s*\|\> return 'EXTENSION';
@@ -274,12 +281,20 @@ lineType
;
clickStatement
: CLICK className CALLBACKNAME {$$ = $1;yy.setClickEvent($2, $3);}
| CLICK className CALLBACKNAME STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
| CLICK className CALLBACKNAME CALLBACKARGS {$$ = $1;yy.setClickEvent($2, $3, $4);}
| CLICK className CALLBACKNAME CALLBACKARGS STR {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
: CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3);}
| CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
| LINK className STR {$$ = $1;yy.setLink($2, $3);}
| LINK className STR SPACE LINK_TARGET {$$ = $1;yy.setLink($2, $3,$5);}
| LINK className STR STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
| LINK className STR STR SPACE LINK_TARGET {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
| CLICK className CALLBACK_NAME {$$ = $1;yy.setClickEvent($2, $3);}
| CLICK className CALLBACK_NAME STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
| CLICK className CALLBACK_NAME CALLBACK_ARGS {$$ = $1;yy.setClickEvent($2, $3, $4);}
| CLICK className CALLBACK_NAME CALLBACK_ARGS STR {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
| CLICK className HREF {$$ = $1;yy.setLink($2, $3);}
| CLICK className HREF SPACE LINK_TARGET {$$ = $1;yy.setLink($2, $3, $5);}
| CLICK className HREF STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
| CLICK className HREF STR SPACE LINK_TARGET {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
;
cssClassStatement

2
src/diagrams/class/svgDraw.js
View File

@@ -167,7 +167,7 @@ export const drawClass = function(elem, classDef, conf) {
title = g
.append('svg:a')
.attr('xlink:href', classDef.link)
.attr('target', '_blank')
.attr('target', classDef.linkTarget)
.append('text')
.attr('y', conf.textHeight + conf.padding)
.attr('x', 0);