在两个顶点的连接上显示自定义菜单 |美图

编程问答 2022-05-30

问题描述

基本上，我试图在边缘连接之前显示我的菜单，我将在其中存储不同的边缘样式。单击菜单中的任何一个选项将决定我的边缘样式。
在我的代码中，我返回硬编码值来决定关系类型。

enter image description here

            //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(';'); 
                }
            });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmxgraph