如何向我的工具栏添加边缘 [mxGraph - js]

Question

我正在尝试在 mxGraph 中的工具栏中添加边缘。顶点按照示例我可以完美地做到这一点。但是边缘我做不到，有人可以帮我吗？我声明了一个链接样式，但它不起作用。

            var addVertex = function(icon, w, h, style)
            {
                var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
                vertex.setVertex(true);
                var img = addToolbarItem(graph, toolbar, vertex, icon);
                img.enabled = true;
                graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
                {
                    var tmp = graph.isSelectionEmpty();
                    mxUtils.setOpacity(img, (tmp) ? 100 : 20);
                    img.enabled = tmp;
                });
            };

            addVertex('images/rectangle.gif', 100, 40, '');
            addVertex('images/rounded.gif', 100, 40, 'shape=link');
            addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
            addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
            addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
            addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
            addVertex('images/actor.gif', 30, 55, 'shape=umlActor');

Answer 1

我认为您可以编辑要向其添加边缘的工具栏的XML文件，就像向工具栏添加新单元格一样

Answer 2

尽管 Edge 是一个单元格对象，但它不能放在工具栏中以进行拖放。如果打算在顶点之间创建连接，则可以在代码中使用以下方法并进行检查：

mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

将

鼠标悬停在任何顶点(源顶点(上时，将出现一个连接图标(使用向右箭头(。只需单击该图标并将其拖动到另一个顶点(目标顶点(。这将在两个顶点之间创建边

Answer 3

var addVertex = function(mylabel, icon, w, h, style)
            {
                var vertex = new mxCell(mylabel, new mxGeometry(0, 0, w, h), style);
                vertex.setVertex(true);
            
                addToolbarItem(graph, toolbar, vertex, icon);
            };
            
            addVertex("None",'<c:url value="/resources/js/examples/editors/images/swimlane.gif"/>', 120, 160, 'shape=swimlane;startSize=20;');
            addVertex("Catagory 1",'<c:url value="/resources/js/examples/editors/images/rectangle.gif"/>', 100, 40, 'shape=rectangle');
            addVertex("Catagory 2",'<c:url value="/resources/js/examples/editors/images/rounded.gif"/>', 100, 40, 'shape=rounded');
            addVertex("Catagory 3",'<c:url value="/resources/js/examples/editors/images/ellipse.gif"/>', 40, 40, 'shape=ellipse');
            addVertex("Catagory 4",'<c:url value="/resources/js/examples/editors/images/rhombus.gif"/>', 40, 40, 'shape=rhombus');
            addVertex("Catagory 5",'<c:url value="/resources/js/examples/editors/images/triangle.gif"/>', 40, 40, 'shape=triangle');
            addVertex("Catagory 6",'<c:url value="/resources/js/examples/editors/images/cylinder.gif"/>', 40, 40, 'shape=cylinder');
            addVertex("Catagory 7",'<c:url value="/resources/js/examples/editors/images/actor.gif"/>', 30, 40, 'shape=actor');

工具栏.addLine((;