flowchart.js icon indicating copy to clipboard operation
flowchart.js copied to clipboard

How to do clickeable elements?

Open webserveis opened this issue 6 years ago • 7 comments

webserveis avatar Mar 20 '18 11:03 webserveis

You add :> and the link after the text, like start=>start: Begin:>https://www.example.org

hilvarenbeek avatar Mar 20 '18 15:03 hilvarenbeek

Hi, Instead of clickable links to some web pages, is it possible to call a function? For example, start=>start: Begin:>myfoo(1)

sarankup avatar Jun 09 '18 02:06 sarankup

https://github.com/adrai/flowchart.js/issues/148#issuecomment-386868790

adrai avatar Jun 09 '18 05:06 adrai

One way I did it was by selecting the svg elements by their id in js and caliing the addEventListener function. "cond=>condition: Yes or No?\n" This creates an HTML element with id="cond" for the box and id="condt" for "Yes or No?". You can select the object:

var box = document.querySelector("#cond");
var boxText = document.queerySelector("#condt");
box.addEventListener('click', fun() {});
boxText.addEventListener('click', fun() {});

Hope this helps.

ChiragSSinghal avatar Jul 27 '18 20:07 ChiragSSinghal

If you just use the following syntax, you can call a javascript function: start=>start: Start:>javascript:test('foo');

Is there a security concern with this option ?

mfrey777 avatar Sep 24 '19 06:09 mfrey777

In theory yes: XSS => https://github.com/adrai/flowchart.js/issues/176

adrai avatar Sep 24 '19 06:09 adrai

Thank you for answer. I plan to generate the flowchart definition in a python backend api. So to be safe, I would have to generate the javascript to set onClick eventlistener on all my dom objects (I would prefer not to have to generate javascript code in the backend). It would be great if there was a way to set the onClick function instead of setting the "href"(so to have the option to set an href or a function on onClick eventlistener as a link, that would really make this framework perfect for SPA (reactjs, angular, ...)

mfrey777 avatar Sep 24 '19 08:09 mfrey777