Я настраиваю график с библиотекой 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 преемником и , не имеющим прямого отношения к startElement
, everithink работает, как указано выше.
При удалении элемента с двумя или более преемниками , 1-й журнал возвращает родительский идентификатор, а 2-й все еще возвращает Undefined
, так что все в порядке.
Затем 3-й журнал возвращает Undefined
также, что не совсем нормально: это означало бы, что кнопки были удалены, даже если они были не врезаны ... Или они были?
При удалении элемента, который является прямым преемником startElement
И без каких-либо других преемников, затем удаляет элемент, который является прямымпреемник startElement
и с 1 преемником, все работает как дела 1 & 2 .
При удалении элементаНе являясь прямым преемником startElement
и с одним преемником напрямую , кнопки удаляются как регистр 3 .
На самом деле я понятия не имею, и это очень хлопотно.Как я могу решить эту проблему?Заранее спасибо.