Зміна маршруту

Зміна маршрутуВибір вузлівПлагін

Встановити залежності

bash
npm i rete-connection-reroute-plugin

Підключення плагіна

ts
import { ReroutePlugin, RerouteExtra } from "rete-connection-reroute-plugin";

type AreaExtra =
  | Area2D<Schemes> // цей тип обов’язковий
  | ReactArea2D<Schemes>
  | RerouteExtra;

const reroutePlugin = new ReroutePlugin<Schemes>();

render.use(reroutePlugin)

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

Рендерінг

Наразі рендерінг пінів можливий за допомогою рендерінг плагінів для React.js, Vue.js, Angular, Svelte та Lit

ts
import { Presets } from "rete-react-plugin"; // або rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin, @retejs/lit-plugin

render.addPreset(Presets.reroute.setup({
  contextMenu(id) {
    reroutePlugin.remove(id);
  },
  translate(id, dx, dy) {
    reroutePlugin.translate(id, dx, dy);
  }
}));

Щоб отримати вичерпний гайд щодо підключення конкретного рендерінг плагіна до вашої версії стека, дотримуйтеся гайду для React.js, Vue.js, Angular, Svelte або Lit

Вибір шпильок

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

Для додавання пінів до системи вибору необхідно використовувати наступний код:

ts
import { RerouteExtensions } from "rete-connection-reroute-plugin";

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

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

render.addPreset(Presets.reroute.setup({
  pointerdown(id) {
    reroutePlugin.unselect(id);
    reroutePlugin.select(id);
  },
  // збережіть 'contextMenu' та 'translate' методи з коду вище
}));

де

• RerouteExtensions.selectablePins — це компактне розширення, яке додає або видаляє шпильки до/з реєстру вибраних елементів і дозволяє їх переміщення.
• подія pointerdown запускається після натискання на шпильку та позначає її як вибрану

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