Ненаправлений

КастомізаціяВибір з'єднаньШлях з'єднання

Цей приклад демонструє кілька важливих фіч:

• Круглі вузли
• Вибір з'єднань
• Уніфікований порт для з'єднань
• Видалення з'єднань за допомогою спеціальної кнопки, розташованої посередині шляху
• З’єднання, представлені прямими лініями та петлями з маркерами на кінці

Для візуалізації використовується класичний пресет, який передбачає поділ на вхідні та вихідні порти, але в цьому випадку використовується хитрість, щоб упакувати їх в єдиний уніфікований сокет, представлений прозорим колом, радіус якого трохи більший за його вузол. Кастомні компоненти використовуються для представлення вузлів і з’єднань. Плагін rete-connection-path-plugin використовується для налаштування шляху підключення та маркера. Замість getDOMSocketPosition використовується спеціальний калькулятор позиції сокета, щоб гарантувати, що початок і кінець з’єднання збігаються з межею вузла.

Приблизно 50% вихідного коду прикладу покладається на стек, і доступний для React.js та Angular. Якщо ви використовуєте інший стек, ви можете мігрувати необхідні компоненти, посилаючись на вихідний код, або надіслати запит на їх впровадження через GitHub Issues у відповідному репозиторії.