Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

click keyword does not fire my callback (on the demo Website too) #603

Closed
NilsRenaud opened this issue Dec 8, 2017 · 4 comments
Closed

Comments

@NilsRenaud
Copy link

I try to use mermaid to display a flowchart but I have an issue with the click keyword : It does not fire my callback and prints in console log :

ERROR TypeError: window[functionName] is not a function
    at SVGGElement.<anonymous> (mermaid.core.js:1316)
    at SVGGElement.__onclick (d3.js:1120)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:4140)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at SVGGElement.ZoneTask.invoke (zone.js:486)

I use Angular 4 and the integration seems to work /quite/ well until I got this bug.
So I try the same click on the mermaid demo website and... it produces the same error !
Check here : https://mermaidjs.github.io/flowchart.html
When clicking I get :

Uncaught TypeError: window[e] is not a function
    at SVGGElement.<anonymous> (mermaid.min.js:1)
    at SVGGElement.__onclick (mermaid.min.js:1)

I use the mermaid's version 7.1.0 of mermaid (which is the current last one)

Do you have any clue in how to fix this ?

Best Regards,

Nils R.

@DropkickSteve
Copy link

Facing the exact same problem. @NilsRenaud did you find a solution maybe?
Thanks

@NilsRenaud
Copy link
Author

Sorry but ... no. Although I didn't try too hard to make it work.
I tried this library for a quick prototype.

But I guess it could be possible to bind a custom function like you would do in plain JS :/

@DropkickSteve
Copy link

Hello @NilsRenaud and thanks for taking the time to reply.
Yes I ended up binding a (click) event on the div enclosing the svg in my template.
I still described the callbacks in the graph definition " click A callback /n click B callback ", that way the user knows that the node is clickable. When a node is clicked I then check for the $event.scrcElement.innerText to see what node the event is originating from so I can handle it properly. I know it is a bit messy but I have yet to find an angular module for any kind of flow diagrams so have to become innovative.

@tylerlong
Copy link
Collaborator

tylerlong commented Mar 13, 2018

I think this issue has been fixed in the latest version: https://github.com/knsv/mermaid/blob/594847ba04e6c4a71d90a2943c9eef806d35b257/dist/index.html#L18

https://github.com/knsv/mermaid/pull/598/files

Maybe it is an Angular issue which I cannot help.

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
…yarn/develop/daisyui-1.24.3

chore(deps): bump daisyui from 1.21.0 to 1.24.3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants