javascript - Show custom menu on connection of two vertex | mxgraph

Question

Basically, I am trying to show my menu before edge connection in which I will store different edge styles. Clicking on any one option of the menu will decide the style of my edge.
In my code, I am returning hard coded values to decide the relationship type.

            //Menu Start***
            function on_context_menu2(){
                  var contextElement = document.getElementById("context-menu2");
                  var content_ =  '';
                  content_+='<div style="cursor: pointer" class="item" onclick="returnRelVal('Aggregation')"><i class="fa fa-refresh"></i> Rel 1</div>'; 
                  content_+='<div style="cursor: pointer" class="item" onclick="returnRelVal('Composition')"><i class="fa fa-refresh"></i> Rel 2</div>'; 
                  
                  window.onclick = function(){
                      contextElement.innerHTML = content_;
                      contextElement.style.top = event.pageY + "px";
                      contextElement.style.left = event.pageX + "px";
                      contextElement.classList.add("active");
                      removeMenu();
                  }
                  function removeMenu(){
                      window.onclick = function(){
                          document.getElementById("context-menu2").classList.remove("active");
                          menuOpened = false;
                      }
                    }
                  
                  //return relVal;
                  //return "Aggregation";
                  return "Composition";
            }
            // Menu End****
                
                
            graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt){
                //alert('connected');
                var aa = on_context_menu2();
                
                alert(aa);
                if(aa=="Aggregation"){
                    var edge = evt.getProperty('cell');
                     var style = graph.getCellStyle(edge); 
                     var newStyle = graph.stylesheet.getCellStyle("edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;strokeColor=#000000;strokeWidth=1;startArrow=open;endArrow=diamond;", style); 
                     var array = [];
                     for (var prop in newStyle)
                        array.push(prop + "=" + newStyle[prop]);
                        edge.style = array.join(';'); 
                }
                else if (aa=="Composition"){
                    var edge = evt.getProperty('cell');
                     var style = graph.getCellStyle(edge); 
                     var newStyle = graph.stylesheet.getCellStyle("edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;strokeColor=#000000;strokeWidth=1;startArrow=oval;endArrow=diamond;", style); 
                     var array = [];
                     for (var prop in newStyle)
                        array.push(prop + "=" + newStyle[prop]);
                        edge.style = array.join(';'); 
                }
            });

Answer 1

等待大神答复