Вибір

БазовийВибір ласо/шатромЗ'єднанняКоментаріЗміна маршрутуПлагін області

Вибір вузлів

Як пояснюється в гайді Базовий редактор, ви можете включити вибір вузла за допомогою розширення selectableNodes

ts
const selector = AreaExtensions.selector()
const accumulating = AreaExtensions.accumulateOnCtrl()

AreaExtensions.selectableNodes(area, selector, { accumulating });

Код вказує, що користувачі можуть вибирати кілька вузлів, утримуючи натиснутою клавішу Ctrl, а потім ці вузли можна переміщувати разом

Вибір або відміна вибору

Окрім дій користувача, вибрати або відмінити вибір вузла можна через вбудовані методи selectableNodes

ts
const selectableNodes = AreaExtensions.selectableNodes(area, selector, { accumulating });

selectableNodes.select(nodeId) // вибір одного вузла, попередній вибір буде скинуто
selectableNodes.select(nodeId, true) // вибір вузла, не скидаючи вибір попередніх
selectableNodes.unselect(nodeId) // видалити вузол з вибраних

Вибір кастомних елементів

Усі елементи, додані до області, можна додати до селектора. Вони можуть діяти як вузли: їх можна вибирати та переміщувати разом з іншими елементами, які наразі виділено

Давайте розглянемо приклад додавання елемента до селектора

ts
const id = 'element-id'
const label = 'element-type'

selector.add({
  id,
  label,
  translate(dx, dy) {
    // змінити положення поточного елемента на dx,dy
  },
  unselect() {
    // запускається при видаленні з селектора
    // тут ви можете виконати оновлення стилів
  },
}, accumulating.active())

Після завершення цього кроку функція translate буде викликатися кожного разу, коли буде переміщено вибраний вузол або інший елемент.

Перш ніж змусити інші вибрані елементи рухатися разом з елементом, який перетягується, вам потрібно позначити елемент, з яким безпосередньо взаємодіє користувач.

ts
selector.pick({ id, label })

Коли на вашому елементі запускається така подія, як pointermove, важливо переконатися, що це захоплений елемент, а потім застосувати зміщення до всіх інших.

ts
if (selector.isPicked({ id, label })) selector.translate(dx, dy)

де dx, dy є зміщенням вашого елемента в межах координат області. Майте на увазі, якщо transform.k не дорівнює 1, значення будуть відхилятися від екранних координат.

Цей підхід pick + isPicked запобігає зацикленню під час виклику selector.translate не лише для події pointermove, але й для будь-яких змін позиції елемента іншими способами.

Видалити елемент із селектора можна легко наступним чином:

ts
selector.remove({ id, label })

Розширення селектора

Окрім функції AreaExtensions.selector(), у вас є можливість безпосередньо використовувати клас AreaExtensions.Selector.

ts
const selector = new AreaExtensions.Selector()

Перевага використання селектора на основі класу полягає в тому, що його можна розширити та налаштувати, щоб включити необхідні функції, наприклад відстеження вибраних або скасування вибору елементів

ts
import type { SelectorEntity } from 'rete-area-plugin/_types/extensions/selectable'

class MySelector<E extends SelectorEntity> extends AreaExtensions.Selector<E> {
  add(entity: E, accumulate: boolean): void {
    super.add(entity, accumulate)
    console.log('додано', entity)
  }
  remove(entity: E): void {
    super.remove(entity)
    console.log('видалено', entity)
  }
}

Інші випадки застосування

• З'єднання
• Коментарі
• Зміна маршруту