Міні-карта

Міні-картаПлагін

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

npm i rete-minimap-plugin

Підготовка вузлів

Попередньо визначені розміри вузлів необхідні для плагіна міні-карти, оскільки вони відображаються на міні-карті з відповідними розмірами.

class Node extends ClassicPreset.Node {
  width = 190;
  height = 120;
}
class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}

type Schemes = GetSchemes<Node, Connection<Node>>;

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

import { MinimapExtra, MinimapPlugin } from "rete-minimap-plugin";

type AreaExtra =
  // ...
  | MinimapExtra

const minimap = new MinimapPlugin<Schemes>()();

area.use(minimap);

Але цього недостатньо, оскільки рендер плагін відповідає за візуалізацію

Рендерінг міні-карти

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

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

render.addPreset(Presets.minimap.setup({ size: 200 }));

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

Міні-карта автоматично вставляється у ваш редактор і має абсолютне позиціонування. Якщо ваш редактор менший за в’юпорт, контейнер вашого редактора повинен має мати position: relative.

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