Как прослушать событие перетаскивания узла Cytoscape JS (включая только тот, который находится непосредственно под курсором / пальцем) - PullRequest
Новая
       20

Как прослушать событие перетаскивания узла Cytoscape JS (включая только тот, который находится непосредственно под курсором / пальцем)

0 голосов
/ 23 апреля 2020

Я использую Cytoscape JS, чтобы создать инструмент для работы с графами на основе веб-браузера. Я столкнулся с проблемой при прослушивании события перетаскивания множественного выбора узлов.

Я мог бы прослушать событие перетаскивания узлов, используя следующий код: 

cy.on('drag', 'node', function (e) {
  let draggedNode = e.target
  ...
}

Однако, когда я перетаскивая несколько узлов одновременно, событие запускается для всех выбранных узлов по отдельности.

Что я хочу сделать sh - это прослушать событие перетаскивания узла, в котором в настоящий момент выбрано несколько узлов, но только прослушивать непосредственно (включая только один узел непосредственно под курсором или пальцем пользователя). Таким образом, когда бы я ни перетаскивал несколько выбранных узлов одновременно, событие срабатывало только на тот, который перетаскивался только под палец или курсор.

Это похоже на grabon, freeon dragfreeon события, которые В настоящее время доступен Cytoscape JS. Однако для этого события dragon нет. Я не хочу слушать событие перетаскивания всех текущих выбранных событий узла. Но только тот, который в данный момент находится под курсором / пальцем.

Я пытался найти позицию курсора из переданного параметра e, чтобы я мог проверить, находится ли курсор в данный момент над текущим запуском узел или нет. Однако значения атрибутов position и renderedPosition оказались равными undefined. Поэтому я не могу выполнить тест положения курсора.

Поэтому кто-нибудь знает, как реализовать это в Javascript? Спасибо.

1 Ответ

3 голосов
/ 23 апреля 2020

Вы можете использовать grabon, free или подобное для обнаружения цели, добавления к ней класса и прослушивания событий drag только для узлов этого класса.

Проверка item.isNode() в приведенном ниже коде бессмысленна. 

cy.on('grabon', 'node', (e) => {
    let item = e.target;

    if (item.isNode()) {
        item.addClass('drag-parent');
    }
});

cy.on('free', 'node', (e) => {
    let item = e.target;

    if (item.isNode() && item.hasClass('drag-parent')) {
        item.removeClass('drag-parent');
    }
})

cy.on('drag', 'node.drag-parent', (e) => {
    let item = e.target;

    console.warn(item.id());
})
...