Событие удаления элемента и его наследников в Jointjs имеет странное поведение - PullRequest
0 голосов
/ 21 декабря 2018

Я настраиваю график с библиотекой Jointjs и специальной функциональностью: когда вы решите удалить элемент, он удалит его и также всех его наследников.

Однако в выбранном элементе есть 4 встроенных элемента, которые действуют как контекстные кнопки (добавить новый элемент, удалить и т. Д.), Поэтому метод должен их разворачивать, чтобы предотвратить их удаление.Дело в том, что, похоже, этого не происходит.

  • На графике вы начинаете с startElement, который является источником, из которого вы можете создать любой другой элемент. Невозможно удалить .
  • Сначала, когда вы нажимаете на кнопку «Удалить», появляется модальное окно с просьбой подтвердить удаление (ОК / Отмена).
  • Затем, когда вы нажимаете ОК, событие начинается.

Итак, сначала у вас есть событие jointjs:

this.paper.on('element:pointerclick', (elementView, evt) => {
    evt.stopPropagation() // to avoid any other event to be triggered

    this.selectedElement = elementView.model

    switch (elementView.model.attributes.type) {
        // ...

        case 'context.DeleteButton': // when the custom element deleteButton is clicked
            $('#deletionModal').modal('show') // confirmation modal

            $('#confirmDeletion').on('click', (event) => {}) // click handler
            break
    }
})

Затем обработчик щелчка указывает накнопка «ОК» с id="confirmDeletion".

Я использовал метод Jointjs getSuccessors(), который вы можете найти в документации здесь : http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Graph.prototype.getSuccessors

$('#confirmDeletion').on('click', (event) => {
    console.log(this.graph.getCell('actionButton').parent()) // parent before

    this.unembedContextButton(this.selectedElement)
    // custom method using the jointjs element.unembed()

    console.log(this.graph.getCell('actionButton').parent()) // parent after

    let successors = this.graph.getSuccessors(this.selectedElement, {deep: false})
    // deep: false, just to be sure we don't take embedded elements into account

    for (let successor of successors) {
        successor.remove()
    }
    this.selectedElement.remove()

    $('#deletionModal').modal('hide')

    console.log(this.graph.getCell('actionButton')) // see if the buttons are not deleted
})

Есть еще одно событие, вызванное element:pointerdown:

this.paper.on('element:pointerdown' ,(elementView, evt) => {
    evt.stopPropagation()

    // determines if elementView.model is a contextual button or a simple element
    if (this.isWorkflowElement(elementView.model)) { 
        this.selectedElement = elementView.model
        var position = this.selectedElement.attributes.position

        this.selectedElement.toFront()
        this.showContextButton(this.selectedElement)
        this.translateContextButton(this.selectedElement, position.x, position.y)
        this.embedContextButtonTo(this.selectedElement)
        }
    })

Вот где это становится сложным , потому что я получаю 5 разных результатов:

    • При удалении элемента без наследников и , не связанных напрямую с startElement, первый журнал возвращает идентификатор родителя, а2-е возвращает Undefined, что приятно: это означает, что кнопки были успешно не развернуты .

    • 3-й журнал возвращает кнопкуns также означает, что они не были удалены, поэтому первый случай - success .

  1. При удалении элемента только с 1 преемником и , не имеющим прямого отношения к startElement, everithink работает, как указано выше.

    • При удалении элемента с двумя или более преемниками , 1-й журнал возвращает родительский идентификатор, а 2-й все еще возвращает Undefined, так что все в порядке.

    • Затем 3-й журнал возвращает Undefined также, что не совсем нормально: это означало бы, что кнопки были удалены, даже если они были не врезаны ... Или они были?

  2. При удалении элемента, который является прямым преемником startElement И без каких-либо других преемников, затем удаляет элемент, который является прямымпреемник startElement и с 1 преемником, все работает как дела 1 & 2 .

  3. При удалении элементаНе являясь прямым преемником startElement и с одним преемником напрямую , кнопки удаляются как регистр 3 .

На самом деле я понятия не имею, и это очень хлопотно.Как я могу решить эту проблему?Заранее спасибо.

...