ngx-vflow 0.1.12 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -12
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,24 +1,76 @@
|
|
|
1
1
|
# ngx-vflow
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
ngx-vflow is an Angular library for creating node-based applications. It aims to assist you in building anything from a static diagram to a visual editor. You can utilize the default design or apply your own by customizing everything using familiar technologies.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
```
|
|
8
|
+
npm i ngx-vflow --save
|
|
9
|
+
```
|
|
9
10
|
|
|
10
|
-
##
|
|
11
|
+
## Basic Example
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
The following code describes 3 nodes and creates 2 edges between them.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
```ts
|
|
16
|
+
@Component({
|
|
17
|
+
template: `<vflow [nodes]="nodes" [edges]="edges" />`,
|
|
18
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19
|
+
standalone: true,
|
|
20
|
+
imports: [VflowModule]
|
|
21
|
+
})
|
|
22
|
+
export class DefaultEdgesDemoComponent {
|
|
23
|
+
public nodes: Node[] = [
|
|
24
|
+
{
|
|
25
|
+
id: '1',
|
|
26
|
+
point: { x: 10, y: 200 },
|
|
27
|
+
type: 'default',
|
|
28
|
+
text: '1'
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: '2',
|
|
32
|
+
point: { x: 200, y: 100 },
|
|
33
|
+
type: 'default',
|
|
34
|
+
text: '2'
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: '3',
|
|
38
|
+
point: { x: 200, y: 300 },
|
|
39
|
+
type: 'default',
|
|
40
|
+
text: '3'
|
|
41
|
+
},
|
|
42
|
+
]
|
|
15
43
|
|
|
16
|
-
|
|
44
|
+
public edges: Edge[] = [
|
|
45
|
+
{
|
|
46
|
+
id: '1 -> 2',
|
|
47
|
+
source: '1',
|
|
48
|
+
target: '2'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
id: '1 -> 3',
|
|
52
|
+
source: '1',
|
|
53
|
+
target: '3'
|
|
54
|
+
},
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
```
|
|
17
58
|
|
|
18
|
-
|
|
59
|
+
The code above renders to this:
|
|
19
60
|
|
|
20
|
-
|
|
61
|
+
<img width="398" alt="image" src="https://github.com/artem-mangilev/ngx-vflow/assets/53087914/2a1b778a-2bfa-4176-9d50-065fdb1f1dec">
|
|
21
62
|
|
|
22
|
-
|
|
63
|
+
For more complex example you may see the documentation: https://www.ngx-vflow.org/
|
|
23
64
|
|
|
24
|
-
|
|
65
|
+
## API
|
|
66
|
+
|
|
67
|
+
`vflow` component API is described here: https://www.ngx-vflow.org/api/ngx-vflow/classes/VflowComponent
|
|
68
|
+
|
|
69
|
+
Host directives for `vflow` that you may find helpful:
|
|
70
|
+
|
|
71
|
+
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ConnectionControllerDirective
|
|
72
|
+
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ChangesControllerDirective
|
|
73
|
+
|
|
74
|
+
## License
|
|
75
|
+
|
|
76
|
+
MIT
|
package/package.json
CHANGED