Updated the click_security_loose test case for classDiagram and class…

…Diagram-v2 for new callback function arg
mermaid-js · Dec 17, 2020 · 032d878 · 032d878
1 parent ddea5b5
commit 032d878
Show file tree

Hide file tree

Showing 7 changed files with 278 additions and 34 deletions.
diff --git a/cypress/platform/class.html b/cypress/platform/class.html
@@ -35,7 +35,7 @@ <h1>info below</h1>
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
-   
+
     </div>
     <div class="mermaid" style="width: 100%; height: 20%;">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -47,7 +47,7 @@ <h1>info below</h1>
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
-   
+
     </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -69,8 +69,8 @@ <h1>info below</h1>
               int id
               test()
             }
-            callback Class01 "callback" "A Tooltip"  
-     
+            callback Class01 "callback" "A Tooltip"
+
       </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
       flowchart TB
@@ -79,7 +79,7 @@ <h1>info below</h1>
       classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
       class a_a apa;
       click a_a "http://www.aftonbladet.se" "apa"
-        
+
       </div>
 
       <div class="mermaid2" style="width: 100%; height: 20%;">
@@ -110,7 +110,7 @@ <h1>info below</h1>
 
         class Shape
         callback Shape "callbackFunction" "This is a tooltip for a callback"
-        
+
       </div>
       <script src="./mermaid.js"></script>
     <script>

diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
@@ -108,8 +108,25 @@
         click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
     </div>
-  </div>
+
+    <div id="FirstLine" class="mermaid">
+      classDiagram
+      class ShapeLink
+      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+      class ShapeCallback
+      click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
+    </div>
 
+    <div id="FirstLine" class="mermaid">
+      classDiagram-v2
+        class ShapeLink2
+        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+        class ShapeCallback2
+        click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
+    </div>
+
+  </div>
+
   <script src="./mermaid.js"></script>
   <script>
   function clickByFlow(elemName) {
@@ -139,11 +156,11 @@
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }
-  function clickByClass() {
+  function clickByClass(arg) {
     const div = document.createElement('div')
     div.className = 'created-by-class-click'
     div.style = 'padding: 20px; background: purple; color: white;'
-    div.innerText = 'Clicked By Class'
+    div.innerText = 'Clicked By Class' + (arg?arg:'')
 
     document.getElementsByTagName('body')[0].appendChild(div)
   }

diff --git a/docs/classDiagram.md b/docs/classDiagram.md
@@ -451,12 +451,14 @@ You would define these actions on a separate line after all classes have been de
 
 ```
 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. (note: callback function will be called with the nodeId as parameter).
+- _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.
 
 ### Examples
 
@@ -466,6 +468,8 @@ _URL Link:_
 classDiagram
 class Shape
 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:_
@@ -474,6 +478,8 @@ _Callback:_
 classDiagram
 class Shape
 callback Shape "callbackFunction" "This is a tooltip for a callback"
+class Shape2
+click Shape2 call callbackFunction() "This is a tooltip for a callback"
 ```
 
 ```
@@ -490,6 +496,10 @@ classDiagram
     class Class02
     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.
@@ -522,7 +532,7 @@ Beginners tip, a full example using interactive links in an html context:
       }
 
       callback Duck callback "Tooltip"
-      click Zebra "http://www.github.com" "This is a link"
+      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
@@ -167,22 +167,37 @@ export const setCssClass = function(ids, className) {
   });
 };
 
+/**
+ * Called by parser when a tooltip is found, e.g. a clickable element.
+ * @param ids Comma separated list of ids
+ * @param tooltip Tooltip to add
+ */
+const setTooltip = function(ids, tooltip) {
+  const config = configApi.getConfig();
+  ids.split(',').forEach(function(id) {
+    if (typeof tooltip !== 'undefined') {
+      classes[id].tooltip = common.sanitizeText(tooltip, config);
+    }
+  });
+};
+
 /**
  * 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, tooltip) {
+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 (tooltip) {
-        classes[id].tooltip = common.sanitizeText(tooltip, config);
+      if (typeof target === 'string') {
+        classes[id].linkTarget = target;
+      } else {
+        classes[id].linkTarget = '_blank';
       }
     }
   });
@@ -193,17 +208,17 @@ export const setLink = function(ids, linkStr, tooltip) {
  * Called by parser when a click definition is found. Registers an event handler.
  * @param ids Comma separated list of ids
  * @param functionName Function to be called on click
- * @param tooltip Tooltip for the clickable element
+ * @param functionArgs Function args the function should be called with
  */
-export const setClickEvent = function(ids, functionName, tooltip) {
+export const setClickEvent = function(ids, functionName, functionArgs) {
   ids.split(',').forEach(function(id) {
-    setClickFunc(id, functionName, tooltip);
+    setClickFunc(id, functionName, functionArgs);
     classes[id].haveCallback = true;
   });
   setCssClass(ids, 'clickable');
 };
 
-const setClickFunc = function(domId, functionName, tooltip) {
+const setClickFunc = function(domId, functionName, functionArgs) {
   const config = configApi.getConfig();
   let id = domId;
   let elemId = lookUpDomId(id);
@@ -215,8 +230,24 @@ const setClickFunc = function(domId, functionName, tooltip) {
     return;
   }
   if (typeof classes[id] !== 'undefined') {
-    if (tooltip) {
-      classes[id].tooltip = common.sanitizeText(tooltip, config);
+    let argList = [];
+    if (typeof functionArgs === 'string') {
+      /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
+      argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
+      for (let i = 0; i < argList.length; i++) {
+        let item = argList[i].trim();
+        /* Removes all double quotes at the start and end of an argument */
+        /* This preserves all starting and ending whitespace inside */
+        if (item.charAt(0) === '"' && item.charAt(item.length - 1) === '"') {
+          item = item.substr(1, item.length - 2);
+        }
+        argList[i] = item;
+      }
+    }
+
+    /* if no arguments passed into callback, default to passing in id */
+    if (argList.length === 0) {
+      argList.push(elemId);
     }
 
     funs.push(function() {
@@ -225,7 +256,7 @@ const setClickFunc = function(domId, functionName, tooltip) {
         elem.addEventListener(
           'click',
           function() {
-            utils.runFunc(functionName, elemId);
+            utils.runFunc(functionName, ...argList);
           },
           false
         );
@@ -314,5 +345,6 @@ export default {
   setClickEvent,
   setCssClass,
   setLink,
+  setTooltip,
   lookUpDomId
 };