js-sequence-diagrams icon indicating copy to clipboard operation
js-sequence-diagrams copied to clipboard

Is it possible to make parts of the sequence diagrams hyperlinkable?

Open pkanthi opened this issue 8 years ago • 2 comments

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.

pkanthi avatar Jun 14 '16 12:06 pkanthi

It is SVG, we can put JS handlers over it, no? It will require some classes on elements, tho

gasparch avatar Apr 14 '17 12:04 gasparch

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

Chetabahana avatar May 24 '18 20:05 Chetabahana