<commit_before># ngFlowchart

ngFlowchart is an easy and customizable way to draw flowchart graphs using AngularJS.

## Getting Started

Install ngFlowchart via bower with `bower install ngFlowchart`

Run `gulp` in the ngFlowchart directory to start an interactive demo.

## Integration

Add stylesheet:
```html
    <link rel="stylesheet" href="bower_components/ngFlowchart/dist/flowchart.css" type="text/css">
```

Include script:
```html
  <script src="bower_components/ngFlowchart/dist/ngFlowchart.js"></script>
```

Insert this line where you want the flowchart to appear. It should fill up the given space, but if you are working on a complex site,
feel free to take a look in our flowchart.css stylesheet and overwrite the styles as you need.
```html
    <fc-canvas model="model" selected-objects="flowchartselected" edge-style="line"></fc-canvas>
```

The structure of `model` and `flowchartselected` of the `fc-canvas` directive looks like the following:
```javascript
  model = {
    nodes: [
      { id: 1, x: 10, y: 10, name: "<NAME> node", connectors: [
          {id: 1, type: bottomConnector}]
      },
      { id: 2, x: 50, y: 50, name: "My seconde node", connectors: [
                {id: 2, type: topConnector}]
      }],
      edges: [{source: 1, destination: 2}]]
    };
    
  flowchartselected = [];
```

Your site should now show your first flowchart with two connected nodes.

## Program structure

![Dependency graph](https://github.com/ONE-LOGIC/ngFlowchart/blob/master/ngFlowchartDependency.png)

## Api

### The model

```javascript
{
  nodes: [Node],
  edges: [Edge]
}
```

#### Node
```javascript
{
  id: integer,
  name: string,
  x: integer, // x-coordinate of the node relative to the canvas.
  y: integer, // y-coordinate of the node relative to the canvas.
  connectors: [Connector]
}
```

#### Connector
```javascript
{
  id: integer,
  type: string
}
```

#### Edge
```javascript
{
 source: Connector.id
 destination: Connector.id
}
```

### fc-canvas attributes
* `model` The model.
* `selected-objects` The selected nodes and edges as objects. Example: `[{id: 1, name: "First node", {...}}, {source: 1, destination: 2}]`
* `edge-style` "line" or "curved".
* `callbacks` Object with callbacks.
  * `edgeAdded` will be called if an edge is added by ngFlowchart. 
  * `edgeDoubleClick(event, edge)` will be called when an edge is doubleclicked.
  * `edgeMouseOver(event, edge)` will be called if the mouse hovers an edge.
  * `isValidEdge(sourceConnector, destinationConnector)` will be called, when the user tries to connect to edges. Returns `true` if this is an valid edge in your application or `false` otherwise.
  * `nodeCallbacks` an object witch will be available in the scope of the node template. This is usefull, to register a doubleclick handler on a node or similiar things.
  
### Modelservice
Our `Modelfactory` could contain some interesting functions for you to use.
Instantiate it with `Modelfactory(model, selectedObjects)` with model and selectedObjects as references to the same objects you gave the canvas.

### The Node template
The template of the node-directive is meant to be overwritten by yourself. You just need to register your own node.html file in the template cache with the key/path `flowchart/node.html`.

```javascript
module.run(function($templateCache) {
  $templateCache.put('flowchart/node.html', '<my><node><template></template></node></my>');
});```
<commit_msg>fixed indentation and markup in README<commit_after># ngFlowchart

ngFlowchart is an easy and customizable way to draw flowchart graphs using AngularJS.

## Getting Started

Install ngFlowchart via bower with `bower install ngFlowchart`

Run `gulp` in the ngFlowchart directory to start an interactive demo.

## Integration

Add stylesheet:
```html
<link rel="stylesheet" href="bower_components/ngFlowchart/dist/flowchart.css" type="text/css">
```

Include script:
```html
<script src="bower_components/ngFlowchart/dist/ngFlowchart.js"></script>
```

Insert this line where you want the flowchart to appear. It should fill up the given space, but if you are working on a complex site,
feel free to take a look in our flowchart.css stylesheet and overwrite the styles as you need.
```html
<fc-canvas model="model" selected-objects="flowchartselected" edge-style="line"></fc-canvas>
```

The structure of `model` and `flowchartselected` of the `fc-canvas` directive looks like the following:
```javascript
model = {
  nodes: [
    { 
      id: 1, 
      x: 10, 
      y: 10, 
      name: "<NAME>", 
      connectors: [
        {
          id: 1, 
          type: bottomConnector
        }
      ]
    },
    { 
      id: 2, 
      x: 50, 
      y: 50, 
      name: "<NAME>", 
      connectors: [
        {
          id: 2, 
          type: topConnector
        }
      ]
    }
  ],
  edges: [
    {
      source: 1, 
      destination: 2
    }
  ]
};
    
flowchartselected = [];
```

Your site should now show your first flowchart with two connected nodes.

## Program structure

![Dependency graph](https://github.com/ONE-LOGIC/ngFlowchart/blob/master/ngFlowchartDependency.png)

## Api

### The model

```javascript
{
  nodes: [Node],
  edges: [Edge]
}
```

#### Node
```javascript
{
  id: integer,
  name: string,
  x: integer, // x-coordinate of the node relative to the canvas.
  y: integer, // y-coordinate of the node relative to the canvas.
  connectors: [Connector]
}
```

#### Connector
```javascript
{
  id: integer,
  type: string
}
```

#### Edge
```javascript
{
 source: Connector.id
 destination: Connector.id
}
```

### fc-canvas attributes
* `model` The model.
* `selected-objects` The selected nodes and edges as objects. Example: `[{id: 1, name: "<NAME>", {...}}, {source: 1, destination: 2}]`
* `edge-style` "line" or "curved".
* `callbacks` Object with callbacks.
  * `edgeAdded` will be called if an edge is added by ngFlowchart. 
  * `edgeDoubleClick(event, edge)` will be called when an edge is doubleclicked.
  * `edgeMouseOver(event, edge)` will be called if the mouse hovers an edge.
  * `isValidEdge(sourceConnector, destinationConnector)` will be called, when the user tries to connect to edges. Returns `true` if this is an valid edge in your application or `false` otherwise.
  * `nodeCallbacks` an object witch will be available in the scope of the node template. This is usefull, to register a doubleclick handler on a node or similiar things.
  
### Modelservice
Our `Modelfactory` could contain some interesting functions for you to use.
Instantiate it with `Modelfactory(model, selectedObjects)` with model and selectedObjects as references to the same objects you gave the canvas.

### The Node template
The template of the node-directive is meant to be overwritten by yourself. You just need to register your own node.html file in the template cache with the key/path `flowchart/node.html`.

```javascript
module.run(function($templateCache) {
  $templateCache.put('flowchart/node.html', '<my><node><template></template></node></my>');
});
```

{'fraction_non_alphanumeric': 0.11921378720979918, 'fraction_numerical': 0.004842615012106538, 'mean_word_length': 3.780122532334922, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '995567', 'n_tokens_mistral': 2151, 'n_tokens_neox': 2062, 'n_words': 797}