search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.13k stars 6.55k forks source link

Gantt interaction seems not to work with mermaidAPI usage #2152

Open pkcpkc opened 3 years ago

pkcpkc commented 3 years ago

Describe the bug When using MermaidJS with the API the interaction (href and click) is disabled, even with securityLevel: 'loose', meanwhile the same interaction works with the inline solution.

Assumption: The passed securityLevel with mermaidAPI is ignored...

To Reproduce See code samples and click on gantt bars.

Expected behavior Interaction with securityLevel: 'loose' works both with inline and API solution.

Code Sample BROKEN mermaidAPI securityLevel

<!doctype html>

<html lang="en">

<head>
    <title>Lean Apps Timeline</title>
    <meta charset="utf-8">

    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        var gantt = `gantt

title Gantt Chart
dateFormat  YYYY-MM-DD

A task with call           :a1, 2014-01-01, 30d
A task with href          :a2, 2014-01-01, 30d

click a1 call openTab("https://www.welt.de")
click a2 href "https://www.welt.de"`;

        // Opens new browser tab with URL
        function openTab(url) {
            window.open(url, '_blank');
        }

        function updateGantt() {
            var mermaidElement = document.getElementsByClassName("mermaid")[0];
            var insertSvg = function (svgCode, bindFunctions) {
                mermaidElement.innerHTML = svgCode;
            }
            mermaid.mermaidAPI.render('mermaid', gantt, insertSvg);
        }

        // see https://mermaid-js.github.io/mermaid/#/./Setup
        mermaid.mermaidAPI.initialize({
            startOnLoad: false,
            securityLevel: 'loose',
            useMaxWidth: true,
            logLevel: 1,
            gantt: {
                barHeight: 20,
                barGap: 1,
                fontSize: 10,
                topAxis: true
            }
        });
    </script>
</head>

<body onload="updateGantt();">
    <div class="mermaid"></div>
</body>

</html>

Code Sample WORKING mermaid inline securityLevel

<!doctype html>

<html lang="en">

<head>
    <title>Lean Apps Timeline</title>
    <meta charset="utf-8">

    <script>
        var gantt = ``;

        // Opens new browser tab with URL
        function openTab(url) {
            window.open(url, '_blank');
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>

<body>
    <div class="mermaid">gantt

        title Gantt Chart
        dateFormat YYYY-MM-DD

        A task with call:a1, 2014-01-01, 30d
        A task with href:a2, 2014-01-01, 30d

        click a1 call openTab("https://www.welt.de")
        click a2 href "https://www.welt.de"</div>

    <script>
        var config = {
            startOnLoad: true,
            securityLevel: 'loose',
            logLevel:1
        };
        mermaid.initialize(config);</script>
</body>

</html>

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

gokikamukow commented 2 years ago

add this line to the end of the insertSVG function: bindFunctions(mermaidElement);