Jgraph：边和顶点之间的连接点

Question

我正在尝试使用 jgraph 来实现建模 Web 应用程序。但是我在将边缘连接到我的顶点时遇到了麻烦。因为每个连接都被安排到顶点的中心（如这个 image 所示）。而当一个顶点有多个连接时，就无法理解模型。我想要完成的是像 this 这样的东西，当你将一条边连接到一个顶点时，你可以将它安排在顶点上任何你想要的位置

这是我用来加载图表的函数

const LoadGraph = (data) => {
let container = divGraph.current;
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
  // Displays an error message if the browser is not supported.
  mxUtils.error("Browser is not supported!", 200, false);
  return toast("Cambia de navegador, no se puede usar la libreria");
}
let newGraph = new mxGraph(container);

//newGraph.border = 1000;
//newGraph.getView().translate = new mxPoint(
//  newGraph.border / 2,
//  newGraph.border / 2
//);
//newGraph.setResizeContainer(true);

//setEditPreview
let editPreview = getEditPreview();
setdrag(editPreview);

//set connection
settingConnection();

newGraph.setConnectable(true);
newGraph.setTooltips(true);

new mxRubberband(newGraph);
let parent = newGraph.getDefaultParent();

const layout = new mxCompactTreeLayout(newGraph, false);

mxConnectionHandler.prototype.outlineConnect = true;
mxConnectionHandler.prototype.select = false;
mxEdgeHandler.prototype.manageLabelHandle = true;

// Enable rotation handle
mxVertexHandler.prototype.rotationEnabled = true;



setlayout({ layout });
setLayoutSetting(layout);

loadGlobalSetting();
setGraphSetting(newGraph);

getCellsInGraph(newGraph);
getRelationsInGraph(newGraph);

//set popupmenu
window["mxCodec"] = mxCodec;
window["mxGraphModel"] = mxGraphModel;
window["mxPopupMenu"] = mxPopupMenu;
window["mxKeyHandler"] = mxKeyHandler;


newGraph.popupMenuHandler.autoExpand = true;

// Adds cells to the model in a single step
newGraph.getModel().beginUpdate();

try {
  window["mxCodec"] = mxCodec;
  window["mxGraphModel"] = mxGraphModel;
  window["mxGeometry"] = mxGeometry;

  let doc = mxUtils.parseXml(data);

  let codec = new mxCodec(doc);

  let tograph = codec.decode(doc.documentElement, newGraph.getModel());
} finally {
  // Updates the display
  newGraph.getModel().endUpdate();
}
//create xml
let encoder = new mxCodec();
let node = encoder.encode(newGraph.getModel());
let toxml = mxUtils.getPrettyXml(node);
setXml(toxml);

//decode to json

const encoderJson = new JsonCodec();
const jsonModel = encoderJson.decode(newGraph.getModel());

setjson({ jsonModel });

// Disables the built-in context menu
mxEvent.disableContextMenu(container);

// Undo/redo
const newUndoManager = new mxUndoManager();
setUndoManager(newUndoManager);

// Trigger event after selection
newGraph.getSelectionModel().addListener(mxEvent.CHANGE, selectionChange);

setGraph(newGraph);

};

这是我用来设置layOut的函数

const setLayoutSetting = (layout) => {
layout.parallelEdgeSpacing = 10;
layout.useBoundingBox = false;
layout.edgeRouting = true;
layout.levelDistance = 60;
layout.nodeDistance = 16;
layout.parallelEdgeSpacing = 10;
layout.resizeParent = true;
layout.isVertexMovable = function (cell) {
  return true;
};
layout.localEdgeProcessing = function (node) {};

};

这是我用来设置图形设置的函数

const setGraphSetting = (graph) => {
graph.gridSize = 30;
graph.setPanning(true);
graph.setResizeContainer(true);
graph.setBorder(700);
graph.setConnectable(false);
graph.setCellsEditable(false);
graph.setEnabled(true);
graph.setCellsCloneable(true);
graph.setCellsDeletable(true);
graph.graphHandler.setRemoveCellsFromParent(false);
graph.setCellsSelectable(true);
graph.setEdgeLabelsMovable(true);
graph.vertexLabelsMovable = true;
graph.allowLoops = true;

// Enables HTML labels
graph.setHtmlLabels(true);
// Disables the folding icon
graph.isCellFoldable = function (cell) {
  return false;
};

graph.centerZoom = true;
// Autosize labels on insert where autosize=1
graph.autoSizeCellsOnAdd = true;

const keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function (evt) {
  if (graph.isEnabled()) {
    const currentNode = graph.getSelectionCell();
    if (currentNode.edge === true) {
      graph.removeCells([currentNode]);
    }
  }
});
keyHandler.bindKey(37, function () {});
new mxRubberband(graph);
graph.getTooltipForCell = function (cell) {
  return cell.getAttribute("desc");
};
let style = [];
style[mxConstants.DEFAULT_HOTSPOT] = 1;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_FILLCOLOR] = "#FFFFFF";
style[mxConstants.STYLE_STROKECOLOR] = "#000000";
style[mxConstants.STYLE_FONTCOLOR] = "#774400";
style[mxConstants.HANDLE_FILLCOLOR] = "#80c6ee";

graph.getStylesheet().putDefaultVertexStyle(style);
style = [];

style[mxConstants.STYLE_STROKECOLOR] = "#000000";
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.OrthConnector;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
style[mxConstants.STYLE_FONTSIZE] = "10";
style[mxConstants.VALID_COLOR] = "#000000";

graph.getStylesheet().putDefaultEdgeStyle(style);

};