如何解决Jgraph:边和顶点之间的连接点
我正在尝试使用 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 举报,一经查实,本站将立刻删除。