Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Click events not firing on v2.8.3

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:10 (2 by maintainers)

Top GitHub Comments

1reaction

jrvjrvcommented, Aug 4, 2019

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.

0reactions

CrgioPeca88commented, May 19, 2021

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
});

Top Results From Across the Web

list item click event not firing when parent div set to hidden ...

The (click) event is not firing. BUT, if i get rid of the [hidden] property binding on the containing div (i.e. the item...

Introduction to events - Learn web development | MDN

The <button> element has an event called 'click' that fires when the user clicks the button. Objects that can fire events have an ......

Input type file onchange event not firing other btn click ... - MSDN

1)so when I click on the html button, i am firing click event of input type file using jquery so that. I can...

Button click event not fired when dragging mouse ... - Monorail

What steps will reproduce the problem? ... 2. Click and hold down the button with the mouse pointer directly on one of the...

Underscore.js

Underscore 2.x will likely remove support for some outdated environments. Collection Functions (Arrays or Objects). each _.each(list, iteratee, [context]) Alias ...