# Reroute

::alert
This guide is based on the [Basic](https://retejs.org/docs/guides/basic) guide. It is recommended to review it for a comprehensive understanding of this guide.
::

::references
  :::ref-example{link="/examples/reroute" title="Reroute"}
  :::

  :::ref-guide{link="/docs/guides/selectable" title="Selectable"}
  :::

  :::ref-github
  ---
  link: https://github.com/retejs/connection-reroute-plugin
  title: Plugin
  ---
  :::
::

## Install dependencies

::kit
::

```bash
npm i rete-connection-reroute-plugin
```

## Plugin connection

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

type AreaExtra =
  | Area2D<Schemes> // this type is mandatory
  | ReactArea2D<Schemes>
  | RerouteExtra;

const reroutePlugin = new ReroutePlugin<Schemes>();

render.use(reroutePlugin)
```

The plugin is connected, but you need also connect a visualization preset to render the pins

## Rendering

Currently, the visualization of the reroute pins is possible using rendering plugins for **React.js**, **Vue.js**, **Angular**, **Svelte** and **Lit**.

```ts
import { Presets } from "rete-react-plugin"; // or  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);
  }
}));
```

For a comprehensive guide on how to connect a specific renderer plugin to your stack version, please follow the guide for
[React.js](https://retejs.org/docs/guides/renderers/react), [Vue.js](https://retejs.org/docs/guides/renderers/vue), [Angular](https://retejs.org/docs/guides/renderers/angular), [Svelte](https://retejs.org/docs/guides/renderers/svelte) or [Lit](https://retejs.org/docs/guides/renderers/lit)

## Selectable Pins

As explained in the [Selectable](https://retejs.org/docs/guides/selectable) guide, you can adjust the selection of all types of elements.

The following code must be used to incorporate pins to the selection system:

```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);
  },
  // keep contextMenu and translate from the code above
}));

```

where

- `RerouteExtensions.selectablePins` is a compact extension that adds or removes pins to/from the registry of selected elements, and enables their movement.
- `pointerdown` event is triggered upon clicking a pin and designates it as the selected pin

Check out the complete result on the [Reroute](https://retejs.org/examples/reroute) example page.