Trying to add link using 'click' to flowchart #188

barttt · 2015-07-17T20:32:46Z

I have tried everything that I can think of to get a click event to fire on a flowchart item, per the docs and the test case code, but I cannot figure out what I am doing wrong. I am using mermaid 0.5.1. Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>ART Process work-flow</title>

        <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
        <link href="/bower_components/mermaid/dist/mermaid.css" rel="stylesheet" type="text/css">
        <link href="/bower_components/mermaid/dist/mermaid.forest.css" rel="stylesheet" type="text/css">

        <style>

            .title 
            {
                font-size: 48px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="/bower_components/mermaid/dist/mermaidAPI.js"></script>
        <script>
        mermaidAPI.initialize({startOnLoad:true});

        function myAction(id)
        {
            alert("click fired");
        }

        $(function()
        {
            var graphDefinition = 'graph TB\nProposal-->Contract\nContract-->Planning\nPlanning-->Design\nDesign-->Build\nBuild-->Verification\nVerification-->Delivery\nDelivery-->Support\nclick Design myAction\n';
            mermaidAPI.render('id1',graphDefinition);
        });
        </script>
        </head>
    <body>
                <div class="title">Process WorkFlow (static test)</div>
                  <div class="mermaid">
                    <div class="id1">   </div>
                  </div>
    </body>
</html>

The text was updated successfully, but these errors were encountered:

knsv · 2015-07-17T20:38:13Z

Sorry to hear that.

Will take a look.

knsv · 2015-07-17T20:54:34Z

I see the issue. With the render method you get the svg code back. The bindings done during rendering is void as the whole svg is torned out from the DOM and returned.
:(

barttt · 2015-07-17T20:58:44Z

Hi Knut-
Thanks for your very quick reply.

So does this mean that using the render API call will not allow a link (via javascript)?
I really hoped this would work..

knsv · 2015-07-17T21:10:19Z

It turns out that it is not hard to fix this so the callback for the render function not only get the svg code back but also a function that sets up the bindings. It would look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>ART Process work-flow</title>
    <meta charset="UTF-8">
    <link href="http://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
    <link href="../dist/mermaid.css" rel="stylesheet" type="text/css">
    <link href="../dist/mermaid.forest.css" rel="stylesheet" type="text/css">

    <style>

        .title
        {
            font-size: 48px;
        }
    </style>
    <script src="../dist/mermaidAPI.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <script>
        mermaidAPI.initialize({startOnLoad:true});

        function myAction(id)
        {
            alert("click fired");
        }

        $(function()
        {
            var callback = function(code,bindEvents){
                bindEvents();
            }
            var graphDefinition = 'graph TB\nProposal-->Contract\nContract-->Planning\nPlanning-->Design\nDesign-->Build\nBuild-->Verification\nVerification-->Delivery\nDelivery-->Support\nclick Design myAction\n';
            mermaidAPI.render('id1',graphDefinition,callback);
        });
    </script>
</head>
<body>
<div class="title">Process WorkFlow (static test)</div>
    <div id="id2">
    </div>
</body>
</html>

Will commit this in a bit. Not released yet though so if you need this early you need to the latest build.

…s discussed in issue #188.

barttt · 2015-07-17T21:19:13Z

Hmm..
Not sure what is wrong, but that doesn't work for me.
What does the bindEvents call do?
And what is code refering to?

knsv · 2015-07-17T22:28:09Z

bindEvents is a function that binds the click events as per the graph definition. This must be done after the svg code is in the DOM.

If you get undefined instead of a function it means that you not have the lastest mermaid.

…s discussed in issue #188. (Try num 2)

knsv · 2015-07-17T22:42:20Z

Something went wrong... Did a rebuild.

Have this code working:

<!DOCTYPE html>
<html>
<head>
    <title>ART Process work-flow</title>
    <meta charset="UTF-8">
    <link href="http://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
    <link href="../dist/mermaid.css" rel="stylesheet" type="text/css">
    <link href="../dist/mermaid.forest.css" rel="stylesheet" type="text/css">

    <style>

        .title
        {
            font-size: 48px;
        }
    </style>
    <script src="../dist/mermaidAPI.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <script>
        mermaidAPI.initialize({startOnLoad:true});

        function myAction(id)
        {
            alert("click fired");
        }

        $(function()
        {
            var callback = function(code,bindEvents){
                console.log(bindEvents);
                $("#div-id1").html(code);
                bindEvents();
            }
            var graphDefinition = 'graph TB\nProposal-->Contract\nContract-->Planning\nPlanning-->Design\nDesign-->Build\nBuild-->Verification\nVerification-->Delivery\nDelivery-->Support\nclick Design myAction\n';
            mermaidAPI.render('id1',graphDefinition,callback);
        });
    </script>
</head>
<body>
<div class="title">Process WorkFlow (static test)</div>
    <div id="div-id1">
    </div>
</body>
</html>

barttt · 2015-07-17T22:56:25Z

Sorry for being a pain..
I don't see what gets passed in for code and bindEvents.
I am using firefox build 39.0 with firebug, and do not see any console log output on startup or if the flow chart elements are clicked.
I do see

barttt · 2015-07-17T23:42:39Z

Hi Knut-
I tried this code in:
Chrome - renders fine & alert fires
IE9 - rendering is messed up but alert fires

Looks like some browser differences are entering the picture.

Thank you for your timely replies

barttt · 2015-07-17T23:45:36Z

I did not catch you mention of mermaid version earlier. I just ran thru the source that I have here. It is marked 0.5.1. Perhaps there is a newer version?

knsv · 2015-07-18T07:13:41Z

Tested in Firefox and noticed the problem was again with the css rules.

Change the initalization call to:

mermaidAPI.initialize({startOnLoad:true,cloneCssStyles:false});

Then it works in firefox as well!

barttt · 2015-07-20T16:08:15Z

Thank you so much for your help!

Daijobou · 2015-09-16T10:25:36Z

This is like dot syntax. In dot you can add "URL" (and "tooltip") to a node. Is URL here not possible? I need each node with a URL. Click on node should open a new page. ;)

knsv · 2015-09-30T14:59:08Z

Yes I'll add that. Good what of breaking up a large flowchart top smaller pieces. How should the syntax for the tooltip look?

knsv · 2015-09-30T16:29:19Z

Will continue discussions about click/tooltip in add this in issue #34. Will close this issue, let me know any objections.

…yarn/develop/autoprefixer-10.2.6 Bump autoprefixer from 10.2.5 to 10.2.6

knsv added a commit that referenced this issue Jul 17, 2015

Beta fix for binding of click events when using the render function a…

71d4113

…s discussed in issue #188.

knsv added a commit that referenced this issue Jul 17, 2015

Beta fix for binding of click events when using the render function a…

1b7ad1f

…s discussed in issue #188. (Try num 2)

knsv closed this as completed Sep 30, 2015

zumdahl76 mentioned this issue Aug 22, 2018

Click event and react component #717

Closed

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022

Merge pull request mermaid-js#188 from mermaid-js/dependabot/npm_and_…

7773252

…yarn/develop/autoprefixer-10.2.6 Bump autoprefixer from 10.2.5 to 10.2.6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trying to add link using 'click' to flowchart #188

Trying to add link using 'click' to flowchart #188

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

barttt commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 18, 2015

barttt commented Jul 20, 2015

Daijobou commented Sep 16, 2015

knsv commented Sep 30, 2015

knsv commented Sep 30, 2015

Trying to add link using 'click' to flowchart #188

Trying to add link using 'click' to flowchart #188

Comments

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 17, 2015

knsv commented Jul 17, 2015

barttt commented Jul 17, 2015

barttt commented Jul 17, 2015

barttt commented Jul 17, 2015

knsv commented Jul 18, 2015

barttt commented Jul 20, 2015

Daijobou commented Sep 16, 2015

knsv commented Sep 30, 2015

knsv commented Sep 30, 2015