Click events not firing on v2.8.3

[jrvjrv]

Describe the bug
Click events on a simple mermaid graph do not fire in v2.8.3. I have attached the full web page, but the core is a simple, two-node flowchart:

<div id="FirstLine" class="mermaid">
        graph TB
        FullFirstSquad-->StripedFirstSquad
        click FullFirstSquad showFullFirstSquad "show details"
</div>

mermaid is initialized as below:

<script type="text/javascript">
        function showFullFirstSquad(elemName) {
            console.log('show ' + elemName);
        }
        mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });

</script>

mermaid draws the flowchart correctly but the "show details" text does not appear on mouse over, and the showFullFirstSquad() method is not called on click.

The problem seems to be due to calling the cb() method in webpackAPI.render. This is the code from the webpack:

  if (typeof cb !== 'undefined') {
    cb(svgCode, _diagrams_flowchart_flowDb__WEBPACK_IMPORTED_MODULE_8__["default"].bindFunctions);
    //cb(svgCode, _diagrams_gantt_ganttDb__WEBPACK_IMPORTED_MODULE_14__["default"].bindFunctions);
  } else {
    _logger__WEBPACK_IMPORTED_MODULE_4__["logger"].warn('CB = undefined!');
  }

This code corresponds to two lines in mermaidAPI.render() on lines 500 & 501. I have commented out the second call to cb, and if I do that, the "show details" text appears on mouse over, and a click calls the method. As best I can tell, the first call to cb sets up the mouseover and click event handlers correctly, then the second call wipes out the working click handlers. I am not 100% sure but the second call may completely redraw the svg too.

This is running on ubuntu in firefox 68.0.1.

The full page:
index.txt

[jrvjrv]

I saw the item "click event only works by clicking on node text," but I tried that. No matter where I clicked I got no results (without commenting out the gantt bindFunctions). I performed some experiments with pure svg events, and if an click handler is placed on a tag (which is where mermaid places it), the entire tag gets click events, not just the text. And if I comment out the gantt bindFunctions, the entire node gets events. So I suspect if that accurate, it is not related.

[GDFaber]

In #891 I forgot to mention that I'm using the URL variant instead of a function callback. In that case, an anchor element is placed inside the node which is clickable (I went with URLs because I cound not get the function callback variant to work).

I'll update #891 and fill in the missing details.

[jrvjrv]

Yes, the anchor variant works as expected for click. I did test that. Based on my experiments for this bug I would expect the tooltip not to work in #891 either, but I didn't notice at the time. I was only interested in verifying I had the syntax correct by trying the url syntax. When I was debugging the code it looked as though the tooltip was put into the event functions in the same way that my own function for the click was put in. Both event handlers were overwritten or deleted or something by the second call to cb(). If you were using the url syntax the missing tooltip almost certainly related.

[GDFaber]

Based on my experiments for this bug I would expect the tooltip not to work in #891 either

That is correct, there are no tooltips displayed. After commenting out the second cb call, tooltip event listeners exist and seem to work.

[knsv]

This has to do with the fix of issue #847 . It turns out that the click event could be used to create XSS attacks on a web site when the clicks are generated by user input.

If you generate the diagrams yourself or by automation you can enable click events when initializing mermaid by setting the security level to loose. See https://mermaidjs.github.io/#/?id=special-note-regarding-version-82

[jrvjrv]

This has to do with the fix of issue #847 . It turns out that the click event could be used to create XSS attacks on a web site when the clicks are generated by user input.

If you generate the diagrams yourself or by automation you can enable click events when initializing mermaid by setting the security level to loose. See https://mermaidjs.github.io/#/?id=special-note-regarding-version-82

If you look at my full source, you will see that security level is set to 'loose' in my call to init. As part of my debugging I checked the security level, and at least in the places I checked, it was set to 'loose'. I do not believe this is the cause of the problem.

As a minor point, all the tests in the code regarding security level have something like

if ( config.securityLevel === 'strict' ) {
  return;
}

That allows anything except "strict" to be treated as not strict, including someone typo-ing "strict" as, say, "strit". It would be better to have the test be less forgiving, e.g.

if ( config.securityLevel !== 'loose' ) {
  return;
}

If someone typos "strict" the application remains secure.

As another minor point, it might be a good idea to add a method, say "allowClickEvents()", on config rather than exposing the raw config.securityLevel string. Then you don't have to repeat the test code everywhere.

[jrvjrv]

I have debugged this a bit more. The svg code is inserted into the page twice, once by flowDB and once by ganttDB. The cb function that is called twice is an anonymous function passed in to mermaidAPI.render:

(svgCode, bindFunctions) => {
      element.innerHTML = svgCode;
      if (typeof callback !== 'undefined') {
        callback(id);
      }
      bindFunctions(element);
    }

In the first call to cb() the svgCode as given by the parsing of the graph is set on the element.InnerHTML. The "callback" function is undefined and is not called. The bindFunctions method is called on the flowDB object. This object has two functions in its funs[] array, which it dutifully sets on the appropriate svg elements.

In the second call to cb() the same svgCode as given by the parsing of the graph is set on the element.InnerHTML. This wipes out the svg elements created in the first call, including their event bindings. The "callback" function is again undefined and is not called. The bindFunctions method is called on the ganttDB object. This object has zero functions in its funs[] array, so none get set.

I am unclear as to the bigger, architectural picture here, but it would seem that just on the basis of the innerHTML being set twice with the same svg code, something has gotten muddled. My first thought is that the different calls to cb() should be in a switch statement based on graphType, as with earlier calls to setConf() and draw(). My second thought is that there should be a factory based on graphType instead, returning only one object that would have these methods on it.

[knsv]

Thanks for doing such an in depth analysis of this. Was an easy fix after you had done the heavy lifting. Also switch ed the handling of the configured value to use !== 'loose'

[jrvjrv]

Fixed with release 8.2.4

[CrgioPeca88]

Hi guys, I have the next error with the click event when I try to run a function from some node from the mermaid diagram:

Uncaught TypeError: Cannot read property 'apply' of undefined
    at Object.runFunc (utils.js:294)
    at SVGGElement.<anonymous> (flowDb.js:287)

do you have any idea about that? my conf is the next:

package.json:

{
...
"devDependencies": {
    "@types/mermaid": "^8.2.5",
    "parcel-bundler": "^1.12.5",
    "typescript": "^4.2.4"
  },
  "dependencies": {
    "mermaid": "^8.10.1",
  }
}

index.html:

<body>
  <div class="mermaid" id="mermaid-diagram">
    graph TB
    FullFirstSquad-->StripedFirstSquad
    click FullFirstSquad showFullFirstSquad "show <strong>details</strong>"
  </div>
  <script type="module" src="./main.ts"></script>
</body>

main.ts:

import mermaid from "mermaid";

function showFullFirstSquad(elemName) {
  console.log('show ' + elemName);
}

mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'loose',
  logLevel: 1
});