Skip to content

Commit 24fb9d4

Browse files
knackstedtknackstedt
committed
feat: add initial documentation for installation and setup
1 parent ea46e19 commit 24fb9d4

File tree

2 files changed

+200
-0
lines changed

2 files changed

+200
-0
lines changed

‎README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# ngx-xyflow
2+
3+
> This project is currently in a beta phase and features will be added upon pull requests.
4+
I will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.
5+
6+
This project is a proper Angular wrapper of the React version of xyflow.
7+
8+
## Quickstart
9+
### Install the Package
10+
```bash
11+
npm install ngx-xyflow
12+
```
13+
14+
### Import the module into your component
15+
```ts
16+
import { Component } from '@angular/core';
17+
import { XYFlowModule } from 'ngx-xyflow';
18+
19+
@Component({
20+
selector: 'app-test',
21+
template: '<ngx-xyflow [nodes]="nodes" [edges]="edges"/>',
22+
imports: [
23+
XYFlowModule
24+
],
25+
standalone: true
26+
})
27+
export class TestComponent {
28+
nodes = [];
29+
edges = [];
30+
}
31+
32+
```
33+
34+
## Examples
35+
36+
### Basic Configuration
37+
38+
```html
39+
<ngx-xyflow
40+
[nodes]="nodes"
41+
[edges]="edges"
42+
>
43+
<!-- The background is configurable in the same manner as the original React component. -->
44+
<ngx-xyflow-background
45+
color="pink"
46+
[gap]="20"
47+
[size]="2"
48+
/>
49+
50+
<!-- Controls can also be configured, and events will fire normally. -->
51+
<ngx-xyflow-controls
52+
(onFitView)="log('onFitView')"
53+
(onInteractiveChange)="log('onInteractiveChange ' + $event)"
54+
(onZoomIn)="log('onZoomIn')"
55+
(onZoomOut)="log('onZoomOut')"
56+
/>
57+
58+
<!-- Add the minimap. -->
59+
<ngx-xyflow-minimap
60+
(onClick)="log('onMinimapClick')"
61+
(onNodeClick)="log('onMinimapNodeClick')"
62+
/>
63+
</ngx-xyflow>
64+
```
65+
66+
67+
### Custom Nodes
68+
69+
```html
70+
<ngx-xyflow
71+
[nodes]="nodes"
72+
[edges]="edges"
73+
>
74+
<!-- Here, nodeType refers to the `type` property on an individual node's JSON. -->
75+
<ngx-xyflow-node
76+
nodeType="selectorNode"
77+
>
78+
<!-- The default template is used as this reduces DOM cluttering. -->
79+
<ng-template let-data>
80+
<div class="custom_node">
81+
{{data.label}}
82+
</div>
83+
</ng-template>
84+
85+
<!-- You can also define the handles here -->
86+
<ngx-xyflow-handle
87+
type="target"
88+
position="left"
89+
[isConnectable]="true"
90+
/>
91+
92+
<ngx-xyflow-handle
93+
type="source"
94+
position="right"
95+
id="b"
96+
/>
97+
</ngx-xyflow-node>
98+
</ngx-xyflow>
99+
```
100+

‎src/README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# ngx-xyflow
2+
3+
> This project is currently in a beta phase and features will be added upon pull requests.
4+
I will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.
5+
6+
This project is a proper Angular wrapper of the React version of xyflow.
7+
8+
## Quickstart
9+
### Install the Package
10+
```bash
11+
npm install ngx-xyflow
12+
```
13+
14+
### Import the module into your component
15+
```ts
16+
import { Component } from '@angular/core';
17+
import { XYFlowModule } from 'ngx-xyflow';
18+
19+
@Component({
20+
selector: 'app-test',
21+
template: '<ngx-xyflow [nodes]="nodes" [edges]="edges"/>',
22+
imports: [
23+
XYFlowModule
24+
],
25+
standalone: true
26+
})
27+
export class TestComponent {
28+
nodes = [];
29+
edges = [];
30+
}
31+
32+
```
33+
34+
## Examples
35+
36+
### Basic Configuration
37+
38+
```html
39+
<ngx-xyflow
40+
[nodes]="nodes"
41+
[edges]="edges"
42+
>
43+
<!-- The background is configurable in the same manner as the original React component. -->
44+
<ngx-xyflow-background
45+
color="pink"
46+
[gap]="20"
47+
[size]="2"
48+
/>
49+
50+
<!-- Controls can also be configured, and events will fire normally. -->
51+
<ngx-xyflow-controls
52+
(onFitView)="log('onFitView')"
53+
(onInteractiveChange)="log('onInteractiveChange ' + $event)"
54+
(onZoomIn)="log('onZoomIn')"
55+
(onZoomOut)="log('onZoomOut')"
56+
/>
57+
58+
<!-- Add the minimap. -->
59+
<ngx-xyflow-minimap
60+
(onClick)="log('onMinimapClick')"
61+
(onNodeClick)="log('onMinimapNodeClick')"
62+
/>
63+
</ngx-xyflow>
64+
```
65+
66+
67+
### Custom Nodes
68+
69+
```html
70+
<ngx-xyflow
71+
[nodes]="nodes"
72+
[edges]="edges"
73+
>
74+
<!-- Here, nodeType refers to the `type` property on an individual node's JSON. -->
75+
<ngx-xyflow-node
76+
nodeType="selectorNode"
77+
>
78+
<!-- The default template is used as this reduces DOM cluttering. -->
79+
<ng-template let-data>
80+
<div class="custom_node">
81+
{{data.label}}
82+
</div>
83+
</ng-template>
84+
85+
<!-- You can also define the handles here -->
86+
<ngx-xyflow-handle
87+
type="target"
88+
position="left"
89+
[isConnectable]="true"
90+
/>
91+
92+
<ngx-xyflow-handle
93+
type="source"
94+
position="right"
95+
id="b"
96+
/>
97+
</ngx-xyflow-node>
98+
</ngx-xyflow>
99+
```
100+

0 commit comments

Comments
 (0)