js-sequence-diagrams
js-sequence-diagrams copied to clipboard
Is it possible to make parts of the sequence diagrams hyperlinkable?
Currently the Sequence diagram generated is pretty static and only good for rendering purposes. To make it interactive, it would be good to allow hyperlinks in the grammar.
It is SVG, we can put JS handlers over it, no? It will require some classes on elements, tho
We can do hyperlinked and coloring as well like this
function trydrawSVG(val) {
try {
....
}catch(err) {
....
} finally {
//to be executed regardless of the try / catch result
checkReady();
}
function checkReady() {
var svg = $('.diagram').find('svg')[0];
if (!svg) {
setTimeout(function(){ checkReady(); }, 300);
} else {
var svgobj = svg.children;
for (i = 0; i < svgobj.length; i++) {
element = svgobj[i];
element.style = "cursor: pointer;";
$(element).mouseover(function(evt){
$(this).hide(100).show(100)
});
$(element).click(function(evt){
$(this).find('rect').css({ fill: 'yellow' });
if($(this).attr("class") == "signal"){
window.open('https://www.google.com/')
}
});
}
}
}
You can check also how it runs hyperlinkable and color filled in jsFiddle https://jsfiddle.net/chetabahana/f7ejxhnk/35/
- Click a box will turn its color to yellow
- Click an arrow will open Google site