jointjs:通过单击链接阻止添加顶点

use*_*695 8 javascript jointjs

我想通过双击链接为链接添加标签.所以这是我的尝试:

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' }
                }
            });
        }
    },
});
Run Code Online (Sandbox Code Playgroud)

问题是,通过双击,还可以同时创建一个顶点.我怎么能防止这种情况?

或者让用户为链接添加标签的另一种简单方法是什么?

use*_*987 14

如文档(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;
    }
Run Code Online (Sandbox Code Playgroud)

  • 那是对的.你也可以只使用一个对象来缩短它(虽然函数更灵活):interactive:{vertexAdd:false}.另外,侧面注释,而不是cellView.model instanceof joint.dia.Link,您可以使用cellView.model.isLink()(相当于但更短) (2认同)
  • 那可以做到.您可以通过链接视图访问标签,并使用Vectorizer库(JointJS的一部分)获取其标签:V(paper.findViewByModel(link).$('.label')[0]).bbox().现在,您需要在链接移动时调整HTML的位置.这取决于应用程序,但最简单的方法是监听所有图形更改:graph.on('change',function(){/*position HTML labels*/}) (2认同)