2015-08-18 2 views
1

Недавно мне нужно было сделать интерактивный режим диаграммы JointJs. Как известно, создание объекта бумаги выглядит следующим образом:Измените атрибут взаимодействия бумаги JointJs?

paper = new joint.dia.Paper({ 
     el: $(#myDiagram), 
     width: this.props.width, 
     height: this.props.height, 
     model: this.state.graph, 
     gridSize: 1, 
     interactive: false 
    }); 

Вы создаете новый документ с параметрами, которые вы хотите для него. В этом случае взаимодействие («интерактивный» флаг) устанавливается равным false. К сожалению, нет меток get, attrs и set на бумажном объекте. Я хотел бы создать кнопку, которая изменяет интерактивный флаг. Его расположение находится в объекте опций внутри бумаги. Ручной доступ изменяет значение, но это вообще не отражает бумагу. Это единственное решение для повторной инициализации при каждом изменении взаимодействия? Спасибо заранее.

ответ

0

Вы уже попробовать позвонить

paper.render() 

после изменения значения?

+0

В конце концов, это модель/вид позвоночника. Так что это может сработать. – kra3

+0

Я сейчас в такой ситуации. Вызов paper.render() после изменения значения не работал для меня. – DenEwout

+0

Я нашел решение и отправил его в качестве ответа. – DenEwout

0

Мой Исправление этой проблемы было следующее:

_.forEach(this.graph.getLinks(), function (link:joint.dia.Link) { 
    self.paper.findViewByModel(link).options.interactive = { 
     vertexAdd: true, 
     vertexMove: true, 
     vertexRemove: true, 
     arrowheadMove: false 
    } 
}); 

(я использовал ответ Дэвида дурман на этот вопрос: https://groups.google.com/forum/#!searchin/jointjs/interactive/jointjs/h7tVqVUTd2E/VfA1BaQaFFAJ)

Это позволило мне изменить интерактивность (в частности изменение вершин) всех мои ссылки без необходимости повторной инициализации бумаги.

0

Это изменилось и стало намного лучше. Я использую jointjs 1.0.3, и теперь это работает для меня сейчас:

edit() { 
    const self = this 
    this.graph.getCells().forEach(function (cell) { 
     const c = cell.findView(self.paper) 
     c.setInteractivity(true) 
    }) 
    }