From 93f15a507b9e34ab7faec2a7109ef7959a2bf807 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 08:50:16 +0100
Subject: [PATCH] Handle old and new syntax

---
 cypress/platform/class.html                  |   2 +-
 cypress/platform/click_security_loose.html   |   8 +-
 cypress/platform/interaction.html            |   8 +-
 docs/classDiagram.md                         |  24 +++--
 src/diagrams/class/classDb.js                |  10 +-
 src/diagrams/class/classDiagram.spec.js      | 101 ++++++++++++++++++-
 src/diagrams/class/parser/classDiagram.jison |  43 +++++---
 src/diagrams/class/svgDraw.js                |   2 +-
 8 files changed, 160 insertions(+), 38 deletions(-)

diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 663edb610..a766639bd 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -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%;">
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 896962687..79c0ac2f2 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -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>
diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html
index a2c76dfc2..76150c93a 100644
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@@ -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>
 
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 6c930437a..635bd08d9 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -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>
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 5a74af0f6..2f5f18f15 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -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');
diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 5a27c255b..0637ff03a 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -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);
diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index 599910648..23f292c55 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -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
diff --git a/src/diagrams/class/svgDraw.js b/src/diagrams/class/svgDraw.js
index 6bd385f8a..0a8be3fcb 100644
--- a/src/diagrams/class/svgDraw.js
+++ b/src/diagrams/class/svgDraw.js
@@ -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);