如何解决在两个顶点的连接上显示自定义菜单 |美图
基本上,我试图在边缘连接之前显示我的菜单,我将在其中存储不同的边缘样式。单击菜单中的任何一个选项将决定我的边缘样式。
在我的代码中,我返回硬编码值来决定关系类型。
//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 举报,一经查实,本站将立刻删除。