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

Проблема в том, что при двойном щелчке одновременно создается вершина. Как я могу предотвратить это?

Или какой еще простой способ позволить пользователям добавлять метку для ссылки?


javascript jointjs
person user3142695    schedule 24.10.2015    source источник

Ответы (1)


arrow_upward
15
arrow_downward

Как показано в документации (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;
    }
person user3848987    schedule 25.10.2015
comment
Это правильно. Вы также можете сделать это короче, просто используя объект (хотя функция более гибкая): интерактивный: { vertexAdd: false }. Кроме того, примечание: вместо cellView.model instanceofjoint.dia.Link вы можете использовать cellView.model.isLink() (что эквивалентно, но короче) - person dave; 25.10.2015
comment
@dave Но невозможно получить точное положение и размер этикетки, верно? Я хотел бы разместить HTML-элемент в качестве наложения точно над меткой - person user3142695; 26.10.2015
comment
Это можно сделать. Вы можете получить доступ к метке через представление ссылки и получить ее bbox с помощью библиотеки Vectorizer (часть JointJS): V(paper.findViewByModel(link).$('.label')[0]).bbox(). Теперь вам нужно настроить позиционирование вашего HTML всякий раз, когда ссылка перемещается. Это зависит от приложения, но проще всего прослушивать все изменения графика: graph.on('change', function() { /* position HTML labels */ }) - person dave; 26.10.2015