open-index/open-npm huggingface dataset:
npm package: @naetverkjs/angular-renderer
Description: ```ts import { AngularRenderPlugin } from '@naetverkjs/angular-renderer';
Author: Konrad Koch
Latest version: 0.8.54

# angular-renderer

### Install

```ts
import { AngularRenderPlugin } from '@naetverkjs/angular-renderer';

editor.use(AngularRenderPlugin);
```

Import NaetverkModule

```ts
import { NaetverkModule } from '@naetverkjs/angular-renderer';

@NgModule({
  imports: [NaetverkModule],
})
export class AppModule {}
```

## Examples

- [Codesandbox](https://codesandbox.io/s/retejs-angular-render-v29f9)

## Control

```ts
import { AngularControl } from '@naetverkjs/angular-renderer';

export class NumControl extends Control implements AngularControl {
  component: Type<ControlComponent>
  props: {[key: string]: unknown}

  constructor(key) {
    super(key);

    this.component = ControlComponent;
    this.props = // key-value
// ...
  }
}
```

## Custom node

Extend node component

```ts
import { NodeComponent, NodeService } from '@naetverkjs/angular-renderer';

@Component({
  templateUrl: './node.component.html', // copy template from src/node
  styleUrls: ['./node.component.sass'], // copy styles from src/node
  providers: [NodeService],
})
export class MyNodeComponent extends NodeComponent {
  constructor(protected service: NodeService) {
    super(service);
  }
}
```

Add component to `entryComponents` of your module

```ts
@NgModule({
  entryComponents: [MyNodeComponent],
})
export class AppModule {}
```

Custom component for all nodes

```ts
editor.use(AngularRenderPlugin, { component: MyNodeComponent });
```

Custom component for specific node

```ts
import { Component } from '@naetverkjs/naetverk';
import { AngularComponent, AngularComponentData } from '@naetverkjs/angular-renderer';

export class AddComponent extends Component implements AngularComponent {
  data: AngularComponentData;

  constructor() {
    super('Add');
    this.data.render = 'angular';
    this.data.component = MyNodeComponent;
  }
// ...
}
```
npm package: @naetverkjs/area
Description: Plugin to draw the network on a configurable background with limited zoom and grid snapping
Author: Konrad Koch
Latest version: 0.8.54

# area-plugin

Plugin to draw the network on a configurable background with limited zoom and grid snapping

### Installation

**Import**

```js
import { AreaPlugin } from '@naetverkjs/area';

editor.use(AreaPlugin);
```

**Configuration**

```js
editor.use(AreaPlugin, {
  background: 'board-background', // Added css class for the background
  snap: { dynamic: true, size: 16 }, // Should the grid snap
  scaleExtent: { min: 0.1, max: 1 }, // Defines the maximum zoom in and zoom out
  translateExtent: { width: 5000, height: 4000 }, // Defines the board size that limits translation
});
```

**Style Definition**
Add the following scss to your component, it defines the background area grid.  
You can also overwrite this if you want.
```scss
$grid-color: #ccc;
$grid-size: 32px;
$grid-area: $grid-size * 10000;

.board-background {
  display: table;
  z-index: -100;
  position: absolute;
  top: -$grid-area;
  left: -$grid-area;
  width: 2 * $grid-area;
  height: 2 * $grid-area;

  &.default {
    background-size: $grid-size $grid-size;
    background-image: linear-gradient(
        to right,
        $grid-color 1px,
        transparent 1px
      ), linear-gradient(to bottom, $grid-color 1px, transparent 1px);
  }
}
```
npm package: @naetverkjs/arrange
Description: Plugin to draw the network on a configurable background with limited zoom and grid snapping
Author: Konrad Koch
Latest version: 0.8.54

# arrange-plugin

Plugin to draw the network on a configurable background with limited zoom and grid snapping

### Installation

**Import**

```js
import { AutoArrangePlugin } from '@naetverkjs/auto-arrange';

editor.use(AutoArrangePlugin);
```

**Use**
The `arrange` call will order the nodes.

```typescript
editor.trigger('arrange', {});
```

**Configuration**

```js
editor.use(ArrangePlugin, {
  margin: { x: 50, y: 50 }, // The Margin between the nodes
  depth: null, // The node depth
  vertical: false, // Vertical or horizontal arrangement
});
```
npm package: @naetverkjs/connections
Description: > _This plugin is based on the [retejs/connection-plugin](https://github.com/retejs/connection-plugin) and the [retejs/connection-mastery-plugi](https://github.com/retejs/connection-mastery-plugin)_
Author: Konrad Koch
Latest version: 0.8.54

# connection-plugin

> _This plugin is based on the [retejs/connection-plugin](https://github.com/retejs/connection-plugin) and the [retejs/connection-mastery-plugi](https://github.com/retejs/connection-mastery-plugin)_

Plugin to render the connections between nodes

### Installation

```js
import { ConnectionPlugin } from '@naetverkjs/connections';

editor.use(ConnectionPlugin);
```

### Parameters

#### Default

```ts
editor.use(ConnectionPlugin, {
  createAndConnect: false,
  pickConnection: false,
});
```

- **createAndConnect**:
  When dropping a connection - press the Key to cll the event emitter for the `contextmenu`

- **pickConnection**:
  When selecting a connection while pressing the Key, the connection will be removed.

#### Register functionality by adding keys

```ts
editor.use(ConnectionPlugin, {
  createAndConnect: { keyCode: 'ControlLeft' },
  pickConnection: { keyCode: 'KeyD' },
});
```

### Styling

To display the connections, add the following scss to your component. You can also overwrite this if you want.

```scss
.connection {
  overflow: visible !important;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  > * {
    pointer-events: all;
  }

  .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: steelblue;
  }
}
```

### Events

The connections plugin adds events to the editor to render the connecting lines between the node sockets.

```js
editor.on('connectionpath', (data) => {
  const {
    points, // array of numbers, e.g. [x1, y1, x2, y2]
    connection, // Naetverk.Connection instance
    d, // string, d attribute of <path>
  } = data;

  data.d = `M ${x1} ${y1} ${x2} ${y2}`; // Override of the the path curve
});
```

```js
editor.on('connectiondrop', (io) /* Input or Output */ => {
  // triggered when the user drops picked connection
});
```

```js
editor.on('connectionpick', (io) /* Input or Output */ => {
  // triggered when the user tries to pick a connection
  // you can prevent it
  return false;
});

editor.trigger('resetconnection'); // reset pseudo connection
```
npm package: @naetverkjs/history
Description: > _This Plugin is based on the [retejs/history-plugin](https://github.com/retejs/history-plugin)_
Author: Konrad Koch
Latest version: 0.8.54

# history-plugin

> _This Plugin is based on the [retejs/history-plugin](https://github.com/retejs/history-plugin)_

Plugin that adds the ability to revert actions

### Installation

**Import**

```ts
import { HistoryPlugin } from '@naetverkjs/history';

editor.use(HistoryPlugin);
```

**Configuration**

```ts
editor.use(HistoryPlugin, { keyboard: true });
```

**Available commands**

```ts
editor.trigger('undo');
editor.trigger('redo');
```

**Custom History Actions**

```ts
import { Action } from '@naetverkjs/history';

export class YourAction extends HistoryAction {
  constructor() {
    super();
  }
  undo() {
    ///
  }
  redo() {
    ///
  }
}

editor.trigger('addhistory', new YourAction());
```

**_Example:_** Add text field changes to history

```ts
class FieldChangeAction extends HistoryPlugin.HistoryAction {
  constructor(prev, next, set) {
    super();
    this.prev = prev;
    this.next = next;
    this.set = set;
  }
  undo() {
    this.set(this.prev);
  }
  redo() {
    this.set(this.next);
  }
}

// inside a "change" method of your Control (called by user action)
// this.value - value before changing
// next - new value
// (v) => this.set(v) - change value of Field by undo/redo
this.emitter.trigger(
  'addhistory',
  new FieldChangeAction(this.value, next, (v) => this.set(v))
);
```
npm package: @naetverkjs/keyboard
Description: ```js import { Keyboardlugin } from '@naetverkjs/keyboard';
Author: Konrad Koch
Latest version: 0.8.54

# keyboard-plugin

### Install

```js
import { Keyboardlugin } from '@naetverkjs/keyboard';

editor.use(KeyboardPlugin);
```

This plugin currently registers the following buttons to an action

| **Key**  | **Action**                                                          |
| -------- | ------------------------------------------------------------------- |
| _Delete_ | Removes the selected nodes                                          |
| _Space_  | Opens the context menu - if available - at the center of the screen |
npm package: @naetverkjs/lifecycle
Description: The lifecycle plugin registers additional events that can be used while working with a component
Author: Konrad Koch
Latest version: 0.8.54

# lifecycle-plugin

The lifecycle plugin registers additional events that can be used while working with a component

### Install

```js
import { LifecyclePlugin } from '@naetverkjs/lifecycle';

editor.use(LifecyclePlugin);
```

### New component methods

```typescript
created(node) {
}

destroyed(node) {
}

onconnect(io) {   // input or output
  return false; // prevent connect
}

ondisconnect(connection) {
  return false; // prevent disconnect
}

connected(connection) {
}

disconnected(connection) {
}
```

### Usage: 

```typescript
import { OnCreated, OnDestroyed, OnConnect, OnConnected, OnDisconnect, OnDisconnected } from 'rete-lifecycle-plugin';

class AddComponent extends Naetverk.Component implements OnCreated, ...
```
npm package: @naetverkjs/selection
Description: > _This plugin was inspired by the [WellerQu/rete-selection-plugin](https://github.com/WellerQu/rete-selection-plugin)_
Author: Konrad Koch
Latest version: 0.8.54

# selection-plugin

> _This plugin was inspired by the [WellerQu/rete-selection-plugin](https://github.com/WellerQu/rete-selection-plugin)_

Plugin to render a selection rectangle to allow the multiselection of nodes. Hold `Ctrl` to enable the multi-selection or to draw a rectangle

### Installation

```js
import { SelectionPlugin } from '@naetverkjs/selection';

editor.use(SelectionPlugin);
```

### Parameters

#### Default

```ts
editor.use(SelectionPlugin, {
  enabled: true,
  offset: {
    x: 0,
    y: 0,
  },
  selectorClass: null,
});
```

- **enabled**:
  Enables or Disables the Plugin
- **offset**:
  The drawing of the rectangle is dependent on the drawing area.
  If this area is moved, the introduction of an offset can be necessary.
- **selectorClass**:
  Allows the extension of the default class of the selection area which is `selection-area`