Інтеграція

Цей фреймворк не прив’язаний до будь-якого фреймворку візуалізації інтерфейсу і може бути інтегрований із найпопулярнішими фреймворками/бібліотеками, такими як Angular, Svelte, Lit, Vue.js, React.js. Доступні такі пакети візуалізації:

• rete-react-plugin
• rete-vue-plugin
• rete-angular-plugin
• rete-svelte-plugin
• @retejs/lit-plugin

Основна мета — дати вам змогу вибрати інструменти візуалізації, які відповідають вашим конкретним потребам. Крім того, якщо вам колись знадобиться використати плагін візуалізації для іншого фреймворку у вашій програмі (наприклад, під час міграції проекту), ви можете це легко зробити. Зверніть увагу, що rete-angular-plugin сумісний лише з додатками Angular.

Класичний пресет

За замовчуванням ви можете використовувати класичний стиль із вбудованими компонентами для:

• вузлів
• зв'язків
• деяких елементів керування (поля введення чисел або тексту)

ts
import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin'

const angular = new AngularPlugin<Schemes, AngularArea2D<Schemes>>({ injector })

angular.addPreset(AngularPresets.classic.setup())

area.use(angular)

Фреймворк дозволяє вам замінювати попередньо визначені компоненти будь-якими іншими компонентами відповідно до ваших потреб. Компонент вузла, зокрема, можна широко кастомізувати. Додаткову інформацію дивіться у гайді Кастомізація

Комбінування рендер плагінів

У цій версії фреймворку покращено підходи до комбінування різних фреймворків візуалізації, одночасно забезпечуючи підтримку TypeScript. Наприклад, ви можете рендерити один вузол за допомогою Vue.js, а інший — за допомогою React.js.

ts
import { ReactArea2D, ReactPlugin, Presets as ReactPresets } from 'rete-react-plugin'
import { VueArea2D, VuePlugin, Presets as VuePresets } from 'rete-vue-plugin'

type AreaExtra =
  | ReactArea2D<Schemes>
  | VueArea2D<Schemes>

const reactPlugin = new ReactPlugin<Schemes, AreaExtra>()
const vuePlugin = new VuePlugin<Schemes, AreaExtra>()

reactPlugin.addPreset(ReactPresets.classic.setup({ customize: {
  node(data) {
    if (data.payload instanceof AddNode) return null // запобігти рендерингу AddNode за допомогою React.js
    return ReactPresets.classic.Node
  }
} }))
vuePlugin.addPreset(VuePresets.classic.setup({ customize: {
  node() {
    return VuePresets.classic.Node // відобразити всі вузли, які не були відтворені раніше використовуваним рендер плагіном
  }
} }))

// порядок має значення
area.use(reactPlugin)
area.use(vuePlugin)

Вузол AddNode у цьому прикладі рендериться за допомогою Vue.js, а всі інші вузли рендеряться за допомогою React.js.

Використання кількох фреймворків одночасно може мати недоліки в плані продуктивності, але це також може значно підвищити швидкість створення прототипів, коли time-to-market є критичним.