如何确定mxgraph中连接的哪一侧连接 [英] How to determine which side of connection is connected in mxgraph
本文介绍了如何确定mxgraph中连接的哪一侧连接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的问题，决定有 3 个方面 Input, Yes, No.我想确定箭头连接到其中的哪一个.
这是我要连接的方式
从是连接
问题:如何知道连接是否连接到Input,Yes,No边
注意:如果问题可以用内置的 Rhombus 解决，那么解决方案是最受欢迎的
这是codepen链接:https://codepen.io/eabangalore/pen/eYvVGOg?editors=1010
代码如下:
var graph;函数 initCanvas(){graph = new mxGraph(document.getElementById('graph-wrapper'));var graphStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" data-v-38092c6f="" data-id="60f14502305ed03160da1fd0" data-name="Upload" class="workflow-bins-item" draggedattached="true" triggerortaskid="8c47f506-d34f-4851-a31a-c66facd957f2" style="background: rgb(1, 98, 247); color: white;"id="2">上传<mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="bins" cell_id="60f14502305ed03160da1fd0" triggerOrTaskId="8c47f506-d34f-4185-c66facd957f2" parent="1"><mxGeometry x="80" y="90" width="145" height="59" as="geometry"/></mxCell></div><div xmlns="http://www.w3.org/1999/xhtml" class="decision-rhombus" data-id="c51a6443-afcc-8705-6557-b1748094c920" draggedattached="true" triggerortaskid="null" id="3"><span value="Decision" class="decision-rhombus-name--center show-rhombus">Decision</span><span title="Input" class="decision-rhombus--left decision-color show-rhombus">Input</span><span title="Yes" class="decision-rhombus--right decision-color show-rhombus">Yes</span><span title="No" class="decision-rhombus--bottom decision-color show-rhombus">No</span><mxCell xmlns="" style="fillColor=none;strokeColor=none顶点="1"customWorkflowType=决策"cell_id="c51a6443-afcc-8705-6557-b1748094c920" parent="1"><mxGeometry x="290" y="83" width="162" height="73" as="geometry"/>;</mxCell></div></root></mxGraphModel>`var doc = mxUtils.parseXml(graphStr);var codec = new mxCodec(doc);codec.decode(doc.documentElement, graph.getModel());//始终呈现为 HTML 节点.你可能不希望在现实世界中那样graph.convertValueToString = 函数(单元格){返回单元格值；}graph.setConnectable(true);graph.setAllowDanglingEdges(false);图形刷新()；}#graph-wrapper{背景:#333；//背景:灰色；宽度:100%；高度:528px；}.决策菱形{背景:灰色；剪辑路径:多边形(0 50％，50％100％，100％50％，50％0)；宽度:162px；显示:内联块；边距:5px；高度:73px；位置:相对！重要；颜色:#fff;字体大小:11px；光标:默认；}.决策菱形>跨度{位置:绝对；}.decision-菱形--左{左:17px；顶部:30px；}.decision-菱形--对{左:137px；顶部:29px；}.决策菱形--底部{左:76px；顶部:52px；}.decision-菱形名称--中心{左:50%；顶部:50%；变换:翻译(-50%，-50%)；宽度:90px；高度:16px；位置:绝对；边界:无；背景:透明；颜色:#fff;文本对齐:居中；文本溢出:省略号；空白:nowrap；溢出:隐藏；用户选择:无；大纲:无；字体大小:12px；}.隐藏菱形{显示:无；}.show-菱形{显示:继承；}.决定颜色{颜色:#d1d1d1；}.workflow-bins-item {/* 边框半径:28px;*/对齐内容:居中；/* 顶部填充:5px;*/显示:弹性；/* margin-left: 20px;*//* 边距顶部:20px;*//* 填充:3px 17px;*/最小高度:35px；/* 最小宽度:34px;*/最小宽度:111.203px；弹性方向:列；对齐项目:居中；字体大小:12px；最大宽度:111.203px；空白:预包装；背景:灰色！重要；}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!--版权所有 (c) 2006-2013, JGraph Ltd--><头><title>菱形带连接输入，是，否</title><!-- 如果不在同一目录中，则设置库的基本路径 --><script type="text/javascript">mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';<!-- 加载并初始化库--><script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script><!-- 示例代码--><!-- 在页面加载后调用 main 函数.容器是动态创建的.--><body onload="initCanvas()"><div id="graph-wrapper"></html>
请帮我提前谢谢！！
解决方案
我花了四天时间解决这个问题.最终我最终覆盖了 mxConnectionHandler.prototype.connect.connect 方法的第三个参数给你 PointerEvent 并且你可以计算距离:
mxConnetEvent = mxConnectionHandler.prototype.connect;mxConnectionHandler.prototype.connect = 函数(源、目标、evt、dropTarget){值 = findClosestPoint(evt);返回 mxConnetEvent.apply(this, arguments);}这是工作片段:
var graph;函数 initCanvas() {graph = new mxGraph(document.getElementById('graph-wrapper'));var graphStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" data-v-38092c6f="" data-id="60f14502305ed03160da1fd0" data-name="Upload" class="workflow-bins-item" draggedattached="true" triggerortaskid="8c47f506-d34f-4851-a31a-c66facd957f2" style="background: rgb(1, 98, 247); color: white;"id="2">Upload<mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="bins" cell_id="60f14502305ed03160da1fd0" triggerOrTaskId="8c47f506-d34f-41a5-c66facd957f2" parent="1"><mxGeometry x="80" y="60" width="145" height="59" as="geometry"/></mxCell></div><div xmlns="http://www.w3.org/1999/xhtml" class="decision-rhombus" data-id="c51a6443-afcc-8705-6557-b1748094c920" draggedattached="true" triggerortaskid="null" id="3"><span value="Decision" class="decision-rhombus-name--center show-rhombus">Decision</span><span title="Input" class="decision-rhombus--left decision-color show-rhombus">Input</span><span title="Yes" class="decision-rhombus--right decision-color show-rhombus">Yes</span><span title="No" class="decision-rhombus--bottom decision-color show-rhombus">No</span><mxCell xmlns="" style="fillColor=none;strokeColor=none顶点="1"customWorkflowType=决策"cell_id="c51a6443-afcc-8705-6557-b1748094c920" parent="1"><mxGeometry x="290" y="83" width="162" height="73" as="geometry"/>;</mxCell></div></root></mxGraphModel>`var doc = mxUtils.parseXml(graphStr);var codec = new mxCodec(doc);codec.decode(doc.documentElement, graph.getModel());//始终呈现为 HTML 节点.你可能不希望在现实世界中那样graph.convertValueToString = 函数(单元格){返回单元格值；}graph.setConnectable(true);graph.setAllowDanglingEdges(false);图形刷新()；函数计算距离(elemX，elemY，mouseX，mouseY){return Math.floor(Math.sqrt(Math.pow(mouseX - elemX, 2) + Math.pow(mouseY - elemY, 2)));}函数 findClosestPoint(evt) {var elemLetf = document.querySelector('.decision-rhombus--left').getBoundingClientRect();var elemRight = document.querySelector('.decision-rhombus--right').getBoundingClientRect();var elemBottom = document.querySelector('.decision-rhombus--bottom').getBoundingClientRect();var distanceLeft = calculateDistance(elemLetf.x, elemLetf.y, evt.x, evt.y);var distanceRight = calculateDistance(elemRight.x, elemRight.y, evt.x, evt.y);var distancebottom = calculateDistance(elemBottom.x, elemBottom.y, evt.x, evt.y);if (distanceRight > distanceLeft && distancebottom > distanceLeft) {返回左"；}else if (distanceLeft > distanceRight && distancebottom > distanceRight) {返回正确"；}别的 {返回底部"；}}显示 = 功能 (e) {console.log('e.clientX:', e.clientX, 'clientY', e.clientY, 'offsetX', e.offsetX, 'offsetY', e.offsetY,'pageX', e.pageX, 'pageY', e.pageY, 'x', e.x, 'y', e.y);}var 值 = "";mxConnetEvent = mxConnectionHandler.prototype.connect;mxConnectionHandler.prototype.connect = 函数(源、目标、evt、dropTarget){//console.log('left', document.querySelector('.decision-rhombus--left').getBoundingClientRect());//console.log('right', document.querySelector('.decision-rhombus--right').getBoundingClientRect());//console.log('buttom', document.querySelector('.decision-rhombus--bottom').getBoundingClientRect());//显示(evt)；值 = findClosestPoint(evt);返回 mxConnetEvent.apply(this, arguments);}mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;mxConnectionHandler.prototype.insertEdge = 函数(父、id、值、源、目标、样式){价值 = 价值；返回 mxConnectionHandlerInsertEdge.apply(this, arguments);};}#graph-wrapper {背景:#333；//背景:灰色；宽度:100%；高度:528px；}.决策菱形{背景:灰色；剪辑路径:多边形(0 50％，50％100％，100％50％，50％0)；宽度:162px；显示:内联块；边距:5px；高度:73px；位置:相对！重要；颜色:#fff;字体大小:11px；光标:默认；}.决策菱形>跨度 {位置:绝对；}.decision-菱形--左{左:17px；顶部:30px；}.decision-菱形--右{左:137px；顶部:29px；}.decision-菱形--底部{左:76px；顶部:52px；}.decision-菱形名称--中心{左:50%；顶部:50%；变换:翻译(-50%，-50%)；宽度:90px；高度:16px；位置:绝对；边界:无；背景:透明；颜色:#fff;文本对齐:居中；文本溢出:省略号；空白:nowrap；溢出:隐藏；用户选择:无；大纲:无；字体大小:12px；}.hide-菱形{显示:无；}.show-菱形{显示:继承；}.决策颜色{颜色:#d1d1d1；}.workflow-bins-item {/* 边框半径:28px;*/对齐内容:居中；/* 顶部填充:5px;*/显示:弹性；/* margin-left: 20px;*//* 边距顶部:20px;*//* 填充:3px 17px;*/最小高度:35px；/* 最小宽度:34px;*/最小宽度:111.203px；弹性方向:列；对齐项目:居中；字体大小:12px；最大宽度:111.203px；空白:预包装；背景:灰色！重要；}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script><body onload="initCanvas()"><div id="graph-wrapper"></div>