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

编程问答 2022-05-23

问题描述

我正在尝试使用 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);

};

解决方法

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

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

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

javascriptjgraphjgraphxmxgraphreactjsreactjsreactjsreactjs