<commit_before># React JS Diagrams

A JSX / ECMAScript port of the awesome [react-diagrams](https://github.com/projectstorm/react-diagrams) repository by dylanvorster.

Note that this repo is currently under development.

## Introduction

A no-nonsense diagramming library written entirely in React with the help of Lodash. It aims to be:

* Simple, and void of any fuss/complications when implementing it into your own application
* Customizable without having to hack the core (adapters/factories etc..)
* Simple to operate and understand without sugar and magic
* Fast and optimized to handle large diagrams with hundreds of nodes/links
* Super easy to use, and should work as you expect it to

## How to install

```
npm install react-js-diagrams
```
or
```
yarn add react-js-diagrams
```

* Its only dependency is Lodash and obviously React so it will install that too.

#### How to see the examples

Simply navigate to the __demos__ directory and load up the corresponding index.html. Alternatively, you can
start the development server with `npm start` and navigate to `http://localhost:3000`.

To see how to create your own nodes like the one below, take a look at __demo3__:

![Demo2](./custom-nodes.png)


#### How to build / develop

Simply run ```webpack``` in the root directory and it will spit out the transpiled code and typescript definitions
into the dist directory as a single file. Run `npm start` to spin up the development server complete with HMR.


## How does it work

The library uses a Model Graph to represent the virtual diagram and then renders the diagram using
2 layers:
* Node Layer -> which is responsible for rendering nodes as HTML components
* Link Layer -> which renders the links as SVG paths

Each node and link is fed into a factory that then generates the corresponding node or link react widget.
Therefore, to create custom nodes and links, register your own factories that return your own widgets.

As long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget,
a link can be connected to it.
<commit_msg>add new onChange events to readme<commit_after># React JS Diagrams

A JSX / ECMAScript port of the awesome [react-diagrams](https://github.com/projectstorm/react-diagrams) repository by dylanvorster.

Note that this repo is currently under development.

## Introduction

A no-nonsense diagramming library written entirely in React with the help of Lodash. It aims to be:

* Simple, and void of any fuss/complications when implementing it into your own application
* Customizable without having to hack the core (adapters/factories etc..)
* Simple to operate and understand without sugar and magic
* Fast and optimized to handle large diagrams with hundreds of nodes/links
* Super easy to use, and should work as you expect it to

## How to install

```
npm install react-js-diagrams
```
or
```
yarn add react-js-diagrams
```

* Its only dependency is Lodash and obviously React so it will install that too.

#### How to see the examples

Simply navigate to the __demos__ directory and load up the corresponding index.html. Alternatively, you can
start the development server with `npm start` and navigate to `http://localhost:3000`.

To see how to create your own nodes like the one below, take a look at __demo3__:

![Demo2](./custom-nodes.png)


#### How to build / develop

Simply run ```webpack``` in the root directory and it will spit out the transpiled code and typescript definitions
into the dist directory as a single file. Run `npm start` to spin up the development server complete with HMR.


## How does it work

The library uses a Model Graph to represent the virtual diagram and then renders the diagram using
2 layers:
* Node Layer -> which is responsible for rendering nodes as HTML components
* Link Layer -> which renders the links as SVG paths

Each node and link is fed into a factory that then generates the corresponding node or link react widget.
Therefore, to create custom nodes and links, register your own factories that return your own widgets.

As long as a node contains at least one port and the corresponding NodeWidget contains at least one PortWidget,
a link can be connected to it.

## Events

**onChange events**
- items-drag-selected -> Array items (NodeModel | LinkModel)
- items-moved -> Array items (NodeModel | LinkModel)
- items-selected -> NodeModel model, Array items (NodeModel | LinkModel)
- canvas-drag -> event
- canvas-shift-select -> event
- canvas-click -> event
- link-created -> PointModel model
- link-selected -> LinkModel model
- link-deselected -> LinkModel model, Array items (NodeModel | LinkModel)
- link-connected -> LinkModel linkModel, PortModel portModel
- node-selected -> NodeModel model
- node-deselected -> NodeModel model, Array items (NodeModel | LinkModel)
- node-moved -> NodeModel model
- point-created -> PointModel model
- selections-deleted -> Array items (NodeModel | LinkModel)

{'fraction_non_alphanumeric': 0.06458123107971746, 'fraction_numerical': 0.0028254288597376388, 'mean_word_length': 4.2444444444444445, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 22, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '582440', 'n_tokens_mistral': 1306, 'n_tokens_neox': 1244, 'n_words': 698}