Dock menu

Dock menuPlugin

Install dependencies

npm i rete-dock-plugin

Plugin connection

Currently, the only preset available is the classic preset, which enables adding nodes to the editor by dragging their previews into the editor area.

import { DockPlugin, DockPresets } from "rete-dock-plugin";

const dock = new DockPlugin<Schemes>();

dock.addPreset(DockPresets.classic.setup({ area, size: 100, scale: 0.6 }));

area.use(dock);

Adding nodes

In order to display node previews, you need to specify a function that returns a node instance. This function is called when a node is added to the Dock menu or dragged onto the editor area.

dock.add(() => new NodeA());
dock.add(() => new NodeB());

Add at a specific position

Inserting a node at the 3rd position (2nd index)

dock.add(() => new NodeA(), 2);

Remove nodes

Use the same function passed to add to remove the added node

const createNodeA = () => new NodeA()


dock.add(createNodeA);
dock.remove(createNodeA);

Check out the complete result on the Dock menu example page.