如何确定mxgraph中连接的哪一侧连接 | 如何确定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>

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>

#graph-wrapper{ background: #333; //background:gray; width: 100%; height: 528px; } .decision-rhombus { background: gray; clip-path: polygon(0 50%, 50% 100%,100% 50%,50% 0); width: 162px; display: inline-block; margin: 5px; height: 73px; position: relative !important; color: #fff; font-size: 11px; cursor: default; } .decision-rhombus > span{ position:absolute; } .decision-rhombus--left{ left: 17px; top: 30px; } .decision-rhombus--right{ left: 137px; top: 29px; } .decision-rhombus--bottom{ left: 76px; top: 52px; } .decision-rhombus-name--center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90px; height: 16px; position: absolute; border: none; background: transparent; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; user-select: none; outline: none; font-size: 12px; } .hide-rhombus{ display: none; } .show-rhombus{ display: inherit; } .decision-color{ color: #d1d1d1; } .workflow-bins-item { /* border-radius: 28px; */ justify-content: center; /* padding-top: 5px; */ display: flex; /* margin-left: 20px; */ /* margin-top: 20px; */ /* padding: 3px 17px; */ min-height: 35px; /* min-width: 34px; */ min-width: 111.203px; flex-direction: column; align-items: center; font-size: 12px; max-width: 111.203px; white-space: pre-wrap; background: gray !important; }

mxConnetEvent = mxConnectionHandler.prototype.connect; mxConnectionHandler.prototype.connect = function (source, target, evt, dropTarget) { Value = findClosestPoint(evt); return mxConnetEvent.apply(this, arguments); }

var graph; function 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-4851-a31a-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" vertex="1" customWorkflowType="decisions" 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()); // render as HTML node always. You probably won't want that in real world though graph.convertValueToString = function (cell) { return cell.value; } graph.setConnectable(true); graph.setAllowDanglingEdges(false); graph.refresh(); function calculateDistance(elemX, elemY, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - elemX, 2) + Math.pow(mouseY - elemY, 2))); } function 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) { return "LEFT"; } else if (distanceLeft > distanceRight && distancebottom > distanceRight) { return 'RIGHT'; } else { return 'BOTTOM'; } } show = function (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 Value = ""; mxConnetEvent = mxConnectionHandler.prototype.connect; mxConnectionHandler.prototype.connect = function (source, target, 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()); //show(evt); Value = findClosestPoint(evt); return mxConnetEvent.apply(this, arguments); } mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge; mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source, target, style) { value = Value; return mxConnectionHandlerInsertEdge.apply(this, arguments); }; }

#graph-wrapper { background: #333; //background:gray; width: 100%; height: 528px; } .decision-rhombus { background: gray; clip-path: polygon(0 50%, 50% 100%,100% 50%,50% 0); width: 162px; display: inline-block; margin: 5px; height: 73px; position: relative !important; color: #fff; font-size: 11px; cursor: default; } .decision-rhombus > span { position: absolute; } .decision-rhombus--left { left: 17px; top: 30px; } .decision-rhombus--right { left: 137px; top: 29px; } .decision-rhombus--bottom { left: 76px; top: 52px; } .decision-rhombus-name--center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90px; height: 16px; position: absolute; border: none; background: transparent; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; user-select: none; outline: none; font-size: 12px; } .hide-rhombus { display: none; } .show-rhombus { display: inherit; } .decision-color { color: #d1d1d1; } .workflow-bins-item { /* border-radius: 28px; */ justify-content: center; /* padding-top: 5px; */ display: flex; /* margin-left: 20px; */ /* margin-top: 20px; */ /* padding: 3px 17px; */ min-height: 35px; /* min-width: 34px; */ min-width: 111.203px; flex-direction: column; align-items: center; font-size: 12px; max-width: 111.203px; white-space: pre-wrap; background: gray !important; }

<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> <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script> <body onload="initCanvas()"> <div id="graph-wrapper"></div> </body>