Angular рендер

Цей гайд є розширенням гайду Базовий редактор і містить інструкції щодо використання rete-angular-plugin замість rete-react-plugin

Базовий Кастомізація Контроли Плагін Angular Контекстне меню Міні-карта Зміна маршруту

Цей плагін пропонує класичний пресет, який містить візуальні компоненти для вузлів, з’єднань, сокетів і елементів керування введенням.

Сумісний з Angular 12, 13, 14, 15, 16, 17, 18 і 19

Цей плагін розроблено ексклюзивно для додатків Angular, оскільки для нього потрібен екземпляр Injector, на відміну від інших плагінів візуалізації. Окрім цього, плагін підтримує Standalone режим в інтеграції починаючи з 19 версії Angular.

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

bash

npm i rete-angular-plugin rete-render-utils @angular/elements@19

Зверніть увагу: цей плагін покладається на @angular/elements, який базується на Веб компонентах. Однак Веб компоненти мають обмеження — їх реєстрацію не можна скасувати. Це обмеження може призвести до повторного використання початкового компонента Angular замість створення нового, коли додається вузол із тим самим ідентифікатором, що потенційно може призвести до використання застарілих даних у кастомному вузлі, таких як дані з ін'єктованого сервісу.

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

Це приклад інтеграції в Angular 19, але ви можете вказати іншу версію (12, 13, 14, 15, 16, 17, 18 або 19) в імпорті, яка відповідає версії вашого додатку.

Ці версії були скомпільовані за допомогою Ivy.

import { AreaPlugin } from "rete-area-plugin";
import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/19";

type AreaExtra = AngularArea2D<Schemes>;

// ....

const render = new AngularPlugin<Schemes, AreaExtra>({ injector });

render.addPreset(Presets.classic.setup());

area.use(render);

де injector — це екземпляр Injector, який можна отримати за допомогою ін'єкції залежностей (DI).

Використання Legacy View Engine

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

import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin";

Контроли

Цей плагін містить вбудовані контроли, які відображаються на основі таких об’єктів:

ClassicPreset.InputControl як <input type="number" /> або <input type="text" />

Просто додайте контрол до вузла

node.addControl('my-control', new ClassicPreset.InputControl("number", {
  initial: 0,
  readonly: false,
  change(value) { }
}))

Якщо ви хочете додати різні типи контролів, ви можете повернути необхідний функціональний компонент в обробнику control властивості customize.

tsx

import { ControlComponent } from "rete-angular-plugin/19";
import { MyButtonComponent } from './my-button.component'

render.addPreset(Presets.classic.setup({
  customize: {
    control(context) {
      if (context.payload.isButton) {
        return MyButtonComponent
      }
      if (context.payload instanceof ClassicPreset.InputControl) { // не забудьте явно вказати вбудований ControlComponent
        return ControlComponent
      }
    }
  }
}));

node.addControl('my-button', { isButton: true, label: 'Click', onClick() {} })

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-button",
  template: `<button
    (pointerdown)="$event.stopPropagation()"
    (click)="data.onClick()"
  >
    {{ data.label }}
  </button>`
})
export class ButtonComponent {
  @Input() data!: { label: string, onClick: () => void };
}

Це спрощена версія, яка підходить для ознайомлення. Для проектів рекомендується дотримуватися підходу, продемонстрованого в прикладі

Переконайтеся, що вказано (pointerdown)="$event.stopPropagation()", щоб запобігти перехопленню областю таких подій, як click.

Кастомізація

Подібно до підходу, описаного вище, ви можете замінити компоненти вузла, з’єднання або сокета.

Кастомізація всіх вузлів

Якщо ви хочете повністю змінити структуру вузла, ви можете реалізувати власний компонент, подібний до node із класичного пресету

import { CustomNodeComponent } from './custom-node.component'

render.addPreset(Presets.classic.setup({
  customize: {
    node() {
      return CustomNodeComponent
    }
  }
}))

Реалізація CustomNodeComponent доступна у файлі custom-node.component.ts прикладу Кастомізація для Angular.

Специфічні вузли

Ви можете додати додаткову умову для застосування цього компонента лише до певних вузлів.

import { NodeComponent } from "rete-angular-plugin/19";

render.addPreset(Presets.classic.setup({
  customize: {
    node(context) {
      if (context.payload.label === "Custom") {
        return CustomNodeComponent;
      }
      return NodeComponent; // використовувати вбудований компонент
    }
  }
}))

await editor.addNode(new ClassicPreset.Node('White'))

Кастомізація з'єднаннь

Використовуйте connection як відправну точку з presets/classic/components директорії вихідного коду плагіна.

import { CustomConnectionComponent } from './custom-connection.component'

render.addPreset(Presets.classic.setup({
  customize: {
    connection() {
      return CustomConnectionComponent
    }
  }
}))

Кастомізація сокета

Використовуйте socket як початкову точку з presets/classic/components директорії вихідного коду плагіна.

import { CustomSocketComponent } from './custom-socket.component'

render.addPreset(Presets.classic.setup({
  customize: {
    socket() {
      return CustomSocketComponent
    }
  }
}))

Щоб кастомізувати контекстне меню для цього рендерінг плагіна, можна перевизначати стилі за допомогою селекторів (і важливо враховувати специфіку селекторів у CSS)

scss

[rete-context-menu] {
  width: 320px;
  context-menu-search input.search {
    background: grey;
  }
  context-menu-item.block {
    background: grey;
  }
}

Інші пресети

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

Документація