Lit рендер

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

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

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

Підтримує Lit версії 3

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

bash

npm i @retejs/lit-plugin rete-render-utils lit

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

import { AreaPlugin } from "rete-area-plugin";
import { LitPlugin, Presets, LitArea2D } from "@retejs/lit-plugin";

type AreaExtra = LitArea2D<Schemes>;

// ....

const render = new LitPlugin<Schemes, AreaExtra>();

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

area.use(render);

Перегляньте сторінку Lit, щоб отримати приклад використання цього рендер плагіна.

Контроли

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

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

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

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

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

import { MyButtonElement } from './MyButton'

customElements.define("my-button", MyButtonElement);

render.addPreset(Presets.classic.setup({
  customize: {
    control(context) {
      if (context.payload.isButton) {
        const { payload } = context;

        return () => html`<my-button .data=${payload}></my-button>`;
      }
      if (context.payload instanceof ClassicPreset.InputControl) { // не забудьте явно вказати вбудований Presets.classic.Control
        return Presets.classic.Control;
      }
    }
  }
}));

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

MyButton.ts

export class CustomButton extends LitElement {
  static get properties() {
    return {
      data: { type: Object },
    };
  }

  declare data: object;

  render() {
    return html`
      <button
        @pointerdown=${(e: MouseEvent) => e.stopPropagation()}
        @doubleclick=${(e: MouseEvent) => e.stopPropagation()}
        @click=${this.data.onClick}
      >${this.data.label}</button>
    `;
  }
}

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

Обов’язково вкажіть @pointerdown та @doubleclick, щоб запобігти перехопленню областю таких подій, як @click.

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

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

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

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

import { CustomNodeElement } from './CustomNode'

customElements.define("custom-node", CustomNodeElement)

render.addPreset(Presets.classic.setup({
  customize: {
    node(context) {
      return ({ emit }) => html`<custom-node .data=${context.payload} .emit=${emit}></custom-node>`;
    }
  }
}))

Реалізація CustomNodeElement доступна у файлі CustomNode.svelte прикладу Кастомізація для Lit.

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

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

render.addPreset(Presets.classic.setup({
  customize: {
    node(context) {
      if (context.payload.label === "Custom") {
        return ({ emit }) => html`<custom-node .data=${context.payload} .emit=${emit}></custom-node>`;
      }
      return ({ emit }) => html`<rete-node .data=${context.payload} .emit=${emit}></rete-node>`;
    }
  }
}))

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

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

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

import { CustomConnectionElement } from './CustomConnection'

customElements.define("custom-connection", CustomConnectionElement);

render.addPreset(Presets.classic.setup({
  customize: {
    connection() {
      return ({ path }) => html`<custom-connection .path=${path}></custom-connection>`;
    }
  }
}))

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

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

import { CustomSocketElement } from './CustomSocket'

customElements.define("custom-socket", CustomSocketElement);

render.addPreset(Presets.classic.setup({
  customize: {
    socket(context) {
      return () => html`<custom-socket .data=${context.payload}></custom-socket>`;
    }
  }
}))

Інші пресети

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

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

Lit рендер