Перегляньте інструкції для Rete Kit

Так, слідуйте гайду Dataflow або Control flow

Двигун підтримує лише середовище виконання JS. Ви можете прив’язати JS до свого середовища або імплементувати власний двигун, подібний до rete-engine (він має просту реалізацію)

Якщо коротко, то так. Зверніться до Ліцензування для отримання додаткової інформації

Його можна використовувати в коді JS, але не рекомендується через поганий DX

Так, слідуйте гайду Імпорт/експорт

Замініть обробник масштабування на null або використовуйте кастомний

ts
const area = new AreaPlugin(container)

area.area.setZoomHandler(null)

Замініть обробник масштабування на null для певної події та відновіть його для протилежної (наприклад, натискання/відпускання Ctrl)

ts
import { Zoom } from 'rete-area-plugin'

// виклик при ініціалізації
area.area.setZoomHandler(null)

// виклик при натисканні Ctrl
area.area.setZoomHandler(new Zoom(0.1))

// виклик при відпусканні Ctrl
area.area.setZoomHandler(null)

Замініть обробник перетягування для певної області, викликавши setDragHandler

ts
  import { Drag } from 'rete-area-plugin';

  area.area.setDragHandler(new Drag({
    down: e => {
      if (e.pointerType === 'mouse' && e.button !== 1) return false

      e.preventDefault()
      return true
    },
    move: () => true
  }))

Позиція зберігається в екземплярі NodeView.

ts
const view = area.nodeViews.get(nodeId)

if (view) {
  view.position // { x, y }
}

Майте на увазі, що екземпляр NodeView може не існувати, наприклад, якщо його ще не додано. У таких випадках бажано обробляти це gracefully (кидати exception лише за необхідності)

ts
area.translate(nodeId, { x: 0, y: 0 })

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

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

ts
const area = new AreaPlugin(container)

area.update('node', node.id)
area.update("control", control.id);

Ознайомтесь з Об’єднання плагінів візуалізації у статті Інтеграція

Використовуйте методи властивості content плагіна області

ts
const area = new AreaPlugin(container)

area.content.add(element)

area.content.remove(element)

Також можна зробити цей елемент перетягуваним

ts
const dragHandler = new Drag()

dragHandler.initialize(element, { /* getters */ }, { /* події */ })

Перегляньте відповідний гайд із кастомізація для React.js, Vue.js, Angular, Svelte або Lit

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

Перегляньте відповідний гайд із кастомізація для React.js, Vue.js, Angular, Svelte або Lit.

• Створіть плагін
• Використовуйте вихідний код наступних пакетів як довідник: React.js, Vue.js, Angular, Svelte або Lit

Вам потрібно зупинити розповсюдження події pointerdown.

Ознайомтесь з елементами керування у відповідному гайді рендер плагіна: React.js, Vue.js, Angular, Svelte, Lit

За замовчуванням область захоплює ці події, тому вам потрібно зупинити розповсюдження події pointerdown, щоб запобігти цьому

Ознайомтесь з елементами керування у відповідному гайді рендер плагіна: React.js, Vue.js, Angular, Svelte, Lit

За замовчуванням вузол налаштовано з властивістю CSS user-select: none, щоб запобігти конфлікту між виділенням тексту та перетягуванням вузла.

Тому, щоб увімкнути виділення тексту в кастомному компоненті вузла, вам потрібно вказати властивість user-select: all для потрібного елемента в межах вузла. Крім того, переконайтеся, що ви викликаєте e.stopPropagation() у події `pointerdown``, щоб запобігти перериванню виділення тексту під час перетягування.

Кожного разу, коли користувач натискає на вузол, запускається подія nodepicked:

ts
area.addPipe(context => {
  if (context.type === 'nodepicked') {
    const node = editor.getNode(context.data.id)

  }
  return context
})

Якщо вам потрібно відстежувати не лише клік, а й вибір вузлів, у вас є можливість розширити селектор, щоб спостерігати за вибраними елементами (не лише вузли) у редакторі

Ви можете додати їх як зазвичай за допомогою методів addInput/addOutput/AddControl, а потім примусово оновити вузол

ts
const area = new AreaPlugin(container)

area.update('node', node.id)

Процес додавання таких елементів вимагає створення спеціального вузла.

Перегляньте відповідний гайд із кастомізації для React.js, Vue.js, Angular, Svelte або Lit.

Ви можете використовувати класичний пресет із кастомними вузлами та уніфікованим сокетом в якості вхідного та вихідного порту.

Перегляньте приклад Undirected.

Перегляньте приклад Вертикальний потік.

Класичний пресет рендерінгу надає гнучкість у вказанні додаткового поля index для входів, виходів або контролів. Ця функція дає змогу змінювати порядок цих елементів у рамках їх списків.

ts
const input = new ClassicPreset.Input(socket)
const output = new ClassicPreset.Output(socket)
const control = new ClassicPreset.InputControl('text')

input.index = 0;
output.index = 0;
control.index = 0;

Процес зміни макета вузла потребує створення кастомного вузла.

Перегляньте відповідний гайд із кастомізації для React.js, Vue.js, Angular, Svelte або Lit.

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

Якщо ви не хочете оновлювати всі свої залежності одночасно за допомогою npm update, ви можете вибірково оновлювати ті, які починаються з rete, за допомогою регулярного виразу

bash
npx npm-check-updates /^rete/ --target  -u

Усі доступні плагіни візуалізації можуть відображати циклічне з’єднання, якщо в ньому вказано властивість isLoop

ts
class Connection extends ClassicPreset.Connection {
  isLoop = false
}

const connection = new Connection(source, output, target, input)

connection.isLoop = true

Мінімальна необхідна версія TypeScript – 4.7.

Інакше ви можете зіткнутися з помилкою Type instantiation is excessively deep and possibly infinite. ts(2589) при використанні методу use. Якщо з якоїсь причини ви не можете використовувати пізнішу версію, єдиним рішенням є використання @ts-ignore.

Наприклад, під час створення додатка Angular 12 за допомогою Rete Kit встановлюється версія 4.7, яка перевищує офіційно підтримувану.

Використання методу area.zoom дає змогу вказати бажаний рівень масштабування та точки зсуву для вирівнювання масштабування

ts
await area.area.zoom(0.8, 0, 0);

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

ts
const delta = 0.2;
const { k } = area.area.transform;
const box = area.container.getBoundingClientRect();
const x = box.width / 2 / k;
const y = box.height / 2 / k;

area.area.zoom(k * (1 - delta), x * delta, y * delta);

Використовуючи метод area.translate, ви можете змінити координати наступним чином

ts
await area.area.translate(100, 20)

Зміна положення відносно поточних координат

ts
const { x, y } = area.area.transform
await area.area.translate(x + 100, y + 20)

Зміна положення редактора з урахуванням коефіцієнта масштабування

ts
const { k } = area.area.transform

await area.area.translate(100 * k, 20 * k)

Якщо ви використовуєте фреймворк, відмінний від React.js, Vue.js, Angular, Svelte або Lit (для якого Rete.js надає рендерінг плагін), ви можете скористатися плагіном рендерінгу React.js для візуалізації вузлів та інших елементів редактора.

Для швидкого початку ви можете створити додаток React.js за допомогою Rete Kit, скопіювати код редактора з src/rete/default.tsx, встановити відповідні залежності у вашому проекті та викликати createEditor, передавши створений контейнер HTMLElement вашим додатком.

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

ts
const area = new AreaPlugin<Schemes, AreaExtra>(container)

const { x, y, k } = area.area.transform
const box = area.container.getBoundingClientRect()
const halfWidth = box.width / 2 / k
const halfHeight = box.height / 2 / k

return { x: halfWidth - x / k, y: halfHeight - y / k }

Попередження "Found more than one element for socket with same key and side" означає, що в редакторі дублюються сокети, які не було належним чином видалено після оновлення, або через асинхронний підхід при розмонтуванні компонентів різними UI фреймворками життєвий цикл старих та нових пересікається.

В першому випадку, коли кількість цих ворнінгів постійно накоплюється, скоріше за все ви маєте проблему з витіком пам'яті через те, що який-сь кастомних вузол не було коректно розмонтовано.

В другому випадку, ворнінга можна уникнути шляхом додавання затримки між видаленням схеми/вузла і монтуванням нової з тими самими ідентифікаторами. В краймному випадку, цей ворнінг не повинен свідчити про проблеми з витіканням пам'яті, тому можете його проігнорувати.

Фреймворк не має зарезервований подій для цього. Натомість ви можете [/uk/docs/guides/selectable#extend-selector](розширити селектор), зробивши викидування подій у відповідних методах.

ts
  area.addPipe(context => {
    if (context.type ===  'zoom' && context.data.source === 'dblclick') return
    return context
  })