JointJS: 防止通过单击链接添加顶点

8

我想通过双击链接来添加标签。这是我的尝试:

paper.on({
    'cell:pointerdblclick': function(cellView, event, x, y){
        if (cellView.model.isLink()) {
            cellView.model.label(0, {
                position: .5,
                attrs: {
                    rect: { fill: 'white' },
                    text: { text: 'my label' }
                }
            });
        }
    },
});

问题是,通过双击还会同时创建一个顶点。我如何防止这种情况发生?或者是否有其他简单的方法让用户为链接添加标签?
1个回答

15

根据文档所示 (http://jointjs.com/api#joint.dia.LinkView:addVertex),只需将此部分添加到 joint.dia.Paper 中:

    interactive: function(cellView) {
        if (cellView.model instanceof joint.dia.Link) {
            // Disable the default vertex add functionality on pointerdown.
            return { vertexAdd: false };
        }
        return true;
    }

2
没错。您还可以使用一个对象缩短它(虽然函数更加灵活):interactive: { vertexAdd: false }。另外,顺便提一下,您可以使用cellView.model.isLink()代替cellView.model instanceof joint.dia.Link(等效但更短)。 - dave
@dave 但是无法精确获取标签的位置和大小,对吧?我想将一个HTML元素作为覆盖层放在标签正上方。 - user3142695
2
可以做到。你可以通过链接视图访问标签,并使用Vectorizer库(JointJS的一部分)获取其边界框:V(paper.findViewByModel(link).$('.label')[0]).bbox()。现在,每当链接移动时,你需要调整HTML的定位。这取决于应用程序,但最简单的方法是侦听所有图形更改:graph.on('change', function() { /* position HTML labels */ })。 - dave

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接