Мне трудно найти то, что мне нужно в документации. Я знаю, что есть константы, но не могу найти ту, которая будет делать то, что я хочу.
Я хочу сделать mxGraph таким, чтобы вы не могли отсоединить дескриптор соединения ребра с вершиной. Я не хочу их показывать. Кроме того, метка ручки, которую я хочу удалить.
Как бы я это сделал?
function main(container) {
// Enables rotation handle
mxVertexHandler.prototype.rotationEnabled = false;
mxVertexHandler.prototype.guidesEnabled = false;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt) {
return !mxEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
// Checks if the browser is supported
if (!mxClient.isBrowserSupported()) {
console.log('flip to the browser compatiability message');
}
// Disables built-in context menu
mxEvent.disableContextMenu(document.body);
// Changes some default colors
mxConstants.HANDLE_FILLCOLOR = '#99ccff';
mxConstants.HANDLE_STROKECOLOR = '#0088cf';
mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';
// Creates the graph inside the given container
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
var baseStyle = graph.getStylesheet().getDefaultVertexStyle();
var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
// setup style
style = mxUtils.clone(baseStyle);
style[mxConstants.STYLE_EDITABLE] = 0;
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
style[mxConstants.STYLE_STROKECOLOR] = "#d4d4d4";
style[mxConstants.STYLE_STROKEWIDTH] = 1;
style[mxConstants.STYLE_ROUNDED] = 1;
style[mxConstants.STYLE_ARCSIZE] = 10;
style[mxConstants.STYLE_RESIZABLE] = 0;
style[mxConstants.STYLE_MARGIN] = 50;
graph.getStylesheet().putCellStyle("style", style)
edgeStyle[mxConstants.STYLE_EDITABLE] = 0;
edgeStyle[mxConstants.STYLE_RESIZABLE] = 0;
edgeStyle[mxConstants.STYLE_STROKECOLOR] = "#d4d4d4";
edgeStyle[mxConstants.STYLE_ORTHOGONAL] = 0;
edgeStyle[mxConstants.STYLE_STROKEWIDTH] = 1;
edgeStyle[mxConstants.STYLE_BENDABLE] = 1;
edgeStyle[mxConstants.STYLE_ROUNDED] = true;
edgeStyle[mxConstants.STYLE_EDGE] = mxConstants.EDGESTYLE_ENTITY_RELATION;
edgeStyle[mxConstants.LABEL_HANDLE_SIZE] = 50;
edgeStyle[mxConstants.HANDLE_FILLCOLOR] = '#000000'
graph.getStylesheet().putCellStyle("edge_style", edgeStyle);
try {
var v1 = graph.insertVertex(parent, null, 'One', 20, 20, 80, 30, 'style');
var v2 = graph.insertVertex(parent, null, 'Two', 200, 150, 80, 30, 'style');
var v3 = graph.insertVertex(parent, null, 'Three', 460, 20, 80, 30, 'style');
var e1 = graph.insertEdge(parent, null, 'connected', v1, v2, "edge_style");
var e2 = graph.insertEdge(parent, null, 'connected', v1, v3, "edge_style");
var e4 = graph.insertEdge(parent, null, 'connected', v3, v2, "edge_style");
// TODO: make it so only the root cell can't be moved
graph.isCellLocked = function(cell) {
return false;
}
// can't resize cells
} finally {
graph.getModel().endUpdate();
}
}