jointjs: prevent adding vertex by clicking on link

Question

I would like to add a label to a link by doing a doubleclick on the link. So this is my attempt:

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' }
                }
            });
        }
    },
});

The problem is, that by doing a doubleclick there is also a vertex beeing created at the same time. How can I prevent that?

Or what would be another simple way to let users add a label for a link?

Brigidabrigit

Answer 1

As shown in the docs (http://jointjs.com/api#joint.dia.LinkView:addVertex) just add this part to 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;
    }

Mulvey

That's correct. You can also make this shorter with just using an object (the function is more flexible though): interactive: { vertexAdd: false }. Also, a side note, instead of cellView.model instanceof joint.dia.Link, you can use cellView.model.isLink() (which is equivalent but shorter) – Cheesecloth

@Cheesecloth But it is not possible to get the exact position and size of the label, right? I would like put a HTML-element as an overlay exactly over the label – Brigidabrigit

That can be done. You can access the label via the link view and get its bbox using the Vectorizer library (part of JointJS): V(paper.findViewByModel(link).$('.label')[0]).bbox(). Now you need to adjust the positioning of your HTML whenever the link moves. This depends on the application but the easiest would be to listen on all graph changes: graph.on('change', function() { /* position HTML labels */ }) – Cheesecloth